-
Notifications
You must be signed in to change notification settings - Fork 102
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
Showing
33 changed files
with
9,434 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,134 @@ | ||
| export function eBayColumns(H) { | ||
| H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) { | ||
| 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 H.each will not exist yet | ||
| proceed.call(this); | ||
| H.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; | ||
|
|
||
| // H.relativeLength returns a length based on either the integer value, or a percentage of a base with w being the base. | ||
| let rTopLeft = H.relativeLength(top ? cornerRadius : 0, w), | ||
| rTopRight = H.relativeLength(top ? cornerRadius : 0, w), | ||
| rBottomRight = H.relativeLength(bottom ? cornerRadius : 0, w), | ||
| rBottomLeft = H.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,99 @@ | ||
| export const chartFontFamily = '"Market Sans", Arial, sans-serif'; | ||
| export const backgroundColor = 'var(--color-background-primary)'; | ||
| export const gridColor = 'var(--color-data-viz-grid)'; | ||
| export const labelsColor = 'var(--color-data-viz-labels)'; | ||
| export const legendColor = 'var(--color-data-viz-legend)'; | ||
| export const legendInactiveColor = 'var(--color-data-viz-legend-inactive)'; | ||
| export const legendHoverColor = 'var(--color-data-viz-legend-hover)'; | ||
| export const tooltipBackgroundColor = 'var(--color-neutral-0)'; | ||
| export const 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))'; | ||
| export const lineChartPrimaryColor = 'var(--color-data-viz-line-chart-primary)'; | ||
| export const lineChartSecondaryColor = 'var(--color-data-viz-line-chart-secondary)'; | ||
| export const lineChartTertiaryColor = 'var(--color-data-viz-line-chart-tertiary)'; | ||
| export const lineChartQueternaryColor = 'var(--color-data-viz-line-chart-queternary)'; | ||
| export const lineChartQuinaryColor = 'var(--color-data-viz-line-chart-quinary)'; | ||
| export const trendPositiveColor = 'var(--color-data-viz-trend-positive)'; | ||
| export const trendNegativeColor = 'var(--color-data-viz-trend-negative)'; | ||
| export const chartPrimaryColor = 'var(--color-data-viz-chart-primary)'; | ||
| export const chartSecondaryColor = 'var(--color-data-viz-chart-secondary)'; | ||
| export const chartTertiaryBackgroundColor = 'var(--color-data-viz-chart-tertiary-background)'; | ||
| export const chartTertiaryStrokeColor = 'var(--color-data-viz-chart-tertiary-stroke)'; | ||
| export const chartQuaternaryBackgroundColor = 'var(--color-data-viz-chart-quaternary-background)'; | ||
| export const chartQuaternaryStrokeColor = 'var(--color-data-viz-chart-quaternary-stroke)'; | ||
| export const chartQuinaryBackgroundColor = 'var(--color-data-viz-chart-quinary-background)'; | ||
| export const chartQuinaryStrokeColor = 'var(--color-data-viz-chart-quinary-stroke)'; | ||
| // patterns are in highcharts PatternOptionsObject format | ||
| // refer to https://api.highcharts.com/class-reference/Highcharts.PatternOptionsObject | ||
| export const pattern1 = { | ||
| 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 | ||
| }, | ||
| }; | ||
| export const pattern2 = { | ||
| 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 | ||
| }, | ||
| }; | ||
| // configure the color sequences based on how many series are used | ||
| export const colorsSingle = [chartPrimaryColor]; | ||
| export const colorsTwo = [chartSecondaryColor, chartPrimaryColor]; | ||
| export const colorsThree = [chartSecondaryColor, chartPrimaryColor, pattern1]; | ||
| export const colorsMore = [ | ||
| chartSecondaryColor, | ||
| pattern1, | ||
| chartPrimaryColor, | ||
| pattern2, | ||
| 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 | ||
| export function setSeriesColors(series) { | ||
| let colors; | ||
| switch (series.length) { | ||
| case 1: | ||
| colors = colorsSingle; | ||
| series[0].lineColor = series[0].borderColor = chartPrimaryColor; | ||
| break; | ||
| case 2: | ||
| colors = colorsTwo; | ||
| series[0].lineColor = series[0].borderColor = chartSecondaryColor; | ||
| series[1].lineColor = series[1].borderColor = chartPrimaryColor; | ||
| break; | ||
| case 3: | ||
| colors = colorsThree; | ||
| series[0].lineColor = series[0].borderColor = chartSecondaryColor; | ||
| series[1].lineColor = series[1].borderColor = chartPrimaryColor; | ||
| series[2].lineColor = series[2].borderColor = chartTertiaryStrokeColor; | ||
| break; | ||
| default: | ||
| colors = colorsMore; | ||
| series[0].lineColor = series[0].borderColor = chartSecondaryColor; | ||
| series[1].lineColor = series[1].borderColor = chartTertiaryStrokeColor; | ||
| series[2].lineColor = series[2].borderColor = chartPrimaryColor; | ||
| if (series.length > 3) { | ||
| series[3].lineColor = series[3].borderColor = chartQuaternaryStrokeColor; | ||
| } | ||
| if (series.length > 4) { | ||
| series[4].lineColor = series[4].borderColor = chartQuaternaryStrokeColor; | ||
| } | ||
| } | ||
| return colors; | ||
| } |
Oops, something went wrong.