-
Notifications
You must be signed in to change notification settings - Fork 108
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a6a228e
commit 8aac07c
Showing
42 changed files
with
4,864 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| export function eBayColumns(HighCharts) { | ||
| if (!HighCharts.seriesTypes.column.prototype.ebayColumn) { | ||
| // check if the column has been extended before attempting to extend again | ||
| HighCharts.wrap(HighCharts.seriesTypes.column.prototype, 'translate', function (proceed) { | ||
| // set a flag that can be checked so the prototype isn't overwritten twice, which looses the original code that is called with the proceed function | ||
| HighCharts.seriesTypes.column.prototype.ebayColumn = true; | ||
| const top = this.options.top, // pull out the top value from the highcharts options object | ||
| bottom = this.options.bottom; // pull out the bottom value from the highcarts options object | ||
|
|
||
| // this runs the original code for this translate function at this point | ||
| // if it is not run HighCharts.each will not exist yet | ||
| proceed.call(this); | ||
| HighCharts.each(this.points, (point) => { | ||
| // loop over each data point element | ||
| const shapeArgs = point.shapeArgs, // reference to the points shapeArgs object | ||
| x = shapeArgs.x, // references to the shapeArgs X value | ||
| w = shapeArgs.width; // references to the shapeArgs width value | ||
|
|
||
| let y = shapeArgs.y, // references to the shapeArgs X value | ||
| // references to the shapeArgs height value. | ||
| // If it is not marked as a bottom point subract 4 pixels to create the visual gap in the chart | ||
| h = shapeArgs.height - (bottom ? 0 : 4); | ||
|
|
||
| // check to make sure h is not negative and if it is set the hight back to the original height and move it's y position instead | ||
| if (h < 0) { | ||
| h = shapeArgs.height; | ||
| y = y - 4; | ||
| } | ||
|
|
||
| const cornerRadius = 3; | ||
|
|
||
| // HighCharts.relativeLength returns a length based on either the integer value, or a percentage of a base with w being the base. | ||
| let rTopLeft = HighCharts.relativeLength(top ? cornerRadius : 0, w), | ||
| rTopRight = HighCharts.relativeLength(top ? cornerRadius : 0, w), | ||
| rBottomRight = HighCharts.relativeLength(bottom ? cornerRadius : 0, w), | ||
| rBottomLeft = HighCharts.relativeLength(bottom ? cornerRadius : 0, w); | ||
|
|
||
| // max corner radius is half the width and height of the shape | ||
| const maxCornerRadius = Math.min(w, h) / 2; | ||
|
|
||
| // adjust top left corner if it is larger that maxCornerRadius | ||
| if (rTopLeft > maxCornerRadius) rTopLeft = maxCornerRadius; | ||
|
|
||
| // adjust top right corner if it is larger that maxCornerRadius | ||
| if (rTopRight > maxCornerRadius) rTopRight = maxCornerRadius; | ||
|
|
||
| // adjust bottom right corner if it is larger that maxCornerRadius | ||
| if (rBottomRight > maxCornerRadius) rBottomRight = maxCornerRadius; | ||
|
|
||
| // adjust bottom left corner if it is larger that maxCornerRadius | ||
| if (rBottomLeft > maxCornerRadius) rBottomLeft = maxCornerRadius; | ||
|
|
||
| point.dlBox = point.shapeArgs; // set the data label Box for aligning tooltips to match the point shape | ||
| point.shapeY = y; // set the points y position | ||
| point.shapeType = 'path'; // set the shape type to path | ||
| point.shapeArgs = { | ||
| // define the shape arg used to render the svg path element | ||
| // d is a standard SVG path definition string | ||
| // refer to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d | ||
| d: [ | ||
| // move to the top left corner plus rTopLeft for the beveled corner width to start the path | ||
| 'M', | ||
| x + rTopLeft, | ||
| y, | ||
| // top side line | ||
| 'L', | ||
| x + w - rTopRight, | ||
| y, | ||
| // top right corner curve | ||
| 'C', | ||
| // top right corner start bezier control point | ||
| x + w - rTopRight / 2, | ||
| y, | ||
| // top right corner end bezier control point | ||
| x + w, | ||
| y + rTopRight / 2, | ||
| // top right | ||
| x + w, | ||
| y + rTopRight, | ||
| // right side | ||
| 'L', | ||
| x + w, | ||
| y + h - rBottomRight, | ||
| // bottom right corner | ||
| 'C', | ||
| // bottom right corner start bezier control point | ||
| x + w, | ||
| y + h - rBottomRight / 2, | ||
| // bottom right corner end bezier control point | ||
| x + w - rBottomRight / 2, | ||
| y + h, | ||
| // bottom right | ||
| x + w - rBottomRight, | ||
| y + h, | ||
| // bottom side | ||
| 'L', | ||
| x + rBottomLeft, | ||
| y + h, | ||
| // bottom left corner | ||
| 'C', | ||
| // bottom left corner start bezier control point | ||
| x + rBottomLeft / 2, | ||
| y + h, | ||
| // bottom left corner start bezier control point | ||
| x, | ||
| y + h - rBottomLeft / 2, | ||
| // bottom left | ||
| x, | ||
| y + h - rBottomLeft, | ||
| // left side | ||
| 'L', | ||
| x, | ||
| y + rTopLeft, | ||
| // top left corner | ||
| 'C', | ||
| // top left corner start bezier control point | ||
| x, | ||
| y + rTopLeft / 2, | ||
| // top left corner end bezier control point | ||
| x + rTopLeft / 2, | ||
| y, | ||
| // top left corner | ||
| x + rTopLeft, | ||
| y, | ||
| 'Z', // close path | ||
| ], | ||
| }; | ||
| }); | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| export function ebayLegend(H) { | ||
| H.wrap(H.Legend.prototype, 'colorizeItem', function (p, item, visible) { | ||
| // this helps make the legend svg elements render crisper | ||
| const width = H.pick(item.borderWidth, 1), | ||
| crisp = -(width % 2) / 2; | ||
| p.apply(this, [].slice.call(arguments, 1)); | ||
|
|
||
| if (item.legendSymbol) { | ||
| if (visible) { | ||
| item.legendSymbol.attr({ | ||
| 'stroke-width': width, // set the border width if visible | ||
| translateX: crisp, // set translateX to land on a perfect pixel | ||
| translateY: crisp, // set translateX to land on a perfect pixel | ||
| stroke: item.options.borderColor, // set the border color of legend item | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| export const chartFontFamily = '"Market Sans", Arial, sans-serif', | ||
| backgroundColor = 'var(--color-background-primary)', | ||
| gridColor = 'var(--color-data-viz-grid)', | ||
| labelsColor = 'var(--color-data-viz-labels)', | ||
| legendColor = 'var(--color-data-viz-legend)', | ||
| legendInactiveColor = 'var(--color-data-viz-legend-inactive)', | ||
| legendHoverColor = 'var(--color-data-viz-legend-hover)', | ||
| tooltipBackgroundColor = 'var(--color-neutral-0)', | ||
| tooltipShadows = | ||
| 'drop-shadow(0 2px 7px var(--color-data-viz-tooltip-shadow-primary)) drop-shadow(0 5px 7px var(--color-data-viz-tooltip-shadow-secondary))', | ||
| lineChartPrimaryColor = 'var(--color-data-viz-line-chart-primary)', | ||
| lineChartSecondaryColor = 'var(--color-data-viz-line-chart-secondary)', | ||
| lineChartTertiaryColor = 'var(--color-data-viz-line-chart-tertiary)', | ||
| lineChartQueternaryColor = 'var(--color-data-viz-line-chart-queternary)', | ||
| lineChartQuinaryColor = 'var(--color-data-viz-line-chart-quinary)', | ||
| trendPositiveColor = 'var(--color-data-viz-trend-positive)', | ||
| trendNegativeColor = 'var(--color-data-viz-trend-negative)', | ||
| chartPrimaryColor = 'var(--color-data-viz-chart-primary)', | ||
| chartSecondaryColor = 'var(--color-data-viz-chart-secondary)', | ||
| chartTertiaryBackgroundColor = 'var(--color-data-viz-chart-tertiary-background)', | ||
| chartTertiaryStrokeColor = 'var(--color-data-viz-chart-tertiary-stroke)', | ||
| chartQuaternaryBackgroundColor = 'var(--color-data-viz-chart-quaternary-background)', | ||
| chartQuaternaryStrokeColor = 'var(--color-data-viz-chart-quaternary-stroke)', | ||
| chartQuinaryBackgroundColor = 'var(--color-data-viz-chart-quinary-background)', | ||
| chartQuinaryStrokeColor = 'var(--color-data-viz-chart-quinary-stroke)', | ||
| // patterns are in highcharts PatternOptionsObject format | ||
| // refer to https://api.highcharts.com/class-reference/Highcharts.PatternOptionsObject | ||
| patternTertiary = { | ||
| pattern: { | ||
| path: { | ||
| // d is a standard SVG path definition string | ||
| // refer to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d | ||
| d: 'M0 0 L0 3', // draw a 3 until vertical line | ||
| }, | ||
| width: 4.5, // defines the x bounds of the repeating pattern | ||
| height: 3, // defines the y bounds of the repeating pattern | ||
| backgroundColor: chartTertiaryBackgroundColor, // sets the patterns background color | ||
| color: chartTertiaryStrokeColor, // sets the patterns stroke color | ||
| patternTransform: 'rotate(-60)', // rotates the path -60 degrees | ||
| }, | ||
| }, | ||
| patternQuaternary = { | ||
| pattern: { | ||
| path: { | ||
| // d is a standard SVG path definition string | ||
| // refer to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d | ||
| d: 'M0 0 L3 0', | ||
| }, | ||
| width: 3, // defines the x bounds of the repeating pattern | ||
| height: 5, // defines the y bounds of the repeating pattern | ||
| backgroundColor: chartQuaternaryBackgroundColor, // sets the patterns background color | ||
| color: chartQuaternaryStrokeColor, // sets the patterns stroke color | ||
| }, | ||
| }, | ||
| colorMapping = [ | ||
| chartPrimaryColor, | ||
| chartSecondaryColor, | ||
| patternTertiary, | ||
| patternQuaternary, | ||
| chartQuinaryBackgroundColor, | ||
| ], | ||
| // function is used to set up the colors including lineColor(svg stroke) on each of the series objects | ||
| // based on the length of the series array | ||
| setSeriesColors = function (series) { | ||
| const strokeColorMapping = [ | ||
| chartPrimaryColor, | ||
| chartSecondaryColor, | ||
| chartTertiaryStrokeColor, | ||
| chartQuaternaryStrokeColor, | ||
| chartQuaternaryStrokeColor, | ||
| ]; | ||
|
|
||
| for (let i = 0; i < series.length; i++) { | ||
| // Added a modulus in case the user passes in more than 5 series so it doesn't error out | ||
| const color = strokeColorMapping[i % strokeColorMapping.length]; | ||
| series[i].lineColor = color; | ||
| series[i].borderColor = color; | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <h1 style='display: flex; justify-content: space-between; align-items: center;'> | ||
| <span> | ||
| ebay-area-chart | ||
| </span> | ||
| <span style='font-weight: normal; font-size: medium; margin-bottom: -15px;'> | ||
| DS v3.7.0 | ||
| </span> | ||
| </h1> | ||
|
|
||
| The area chart displays one to five series of data points as an interactive stacked area chart |
Oops, something went wrong.