From 708c2926caac44486b89a08823c3c8cf0104d537 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 30 Apr 2024 11:53:47 -0400 Subject: [PATCH 1/4] added solid option to vertical bar --- packages/VerticalBarChart/src/VerticalBarChart.tsx | 11 ++++++++++- packages/VerticalBarChart/src/vertical-bar-chart.scss | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/VerticalBarChart/src/VerticalBarChart.tsx b/packages/VerticalBarChart/src/VerticalBarChart.tsx index faee5a10..fd32f43e 100644 --- a/packages/VerticalBarChart/src/VerticalBarChart.tsx +++ b/packages/VerticalBarChart/src/VerticalBarChart.tsx @@ -36,6 +36,8 @@ export interface VerticalBarChartProps extends React.ComponentProps<"div"> { height?: number; /** Whether or not the chart bars should be animated */ isAnimationActive?: boolean; + /** Whether or not the chart bars are following the heat colors */ + isSolid?: boolean; /** The label to be displayed on the bottom right of the chart */ maxLabel?: string; /** The label to be displayed on the bottom left of the chart */ @@ -48,6 +50,7 @@ const VerticalBarChart: React.FunctionComponent = ({ dataTest, height = 200, isAnimationActive = true, + isSolid = false, maxLabel = "10", minLabel = "0", ...rest @@ -77,7 +80,7 @@ const VerticalBarChart: React.FunctionComponent = ({ barCategoryGap="15%" margin={{ top: 2, left: 2, right: 2, bottom: 2 }} width={800} - /* Width and height here are ignored because of ResponsiveContainer, + /* Width and height here are ignored because of ResponsiveContainer, but are useful for tests. */ height={height} > @@ -87,16 +90,22 @@ const VerticalBarChart: React.FunctionComponent = ({ dataKey="value" radius={[5, 5, 0, 0]} isAnimationActive={isAnimationActive} + isSolid={isSolid} > {data.map((entry, index) => { const cellProps: CellProps = { className: cx("ids-vertical-bar-chart__bar", entry.className), key: `cell-${index}` }; + if (entry.color) { cellProps.fill = entry.color; } + if (isSolid) { + cellProps.fill = "var(--ids-vertical-bar-chart-solid-color)"; + } + return ; })} diff --git a/packages/VerticalBarChart/src/vertical-bar-chart.scss b/packages/VerticalBarChart/src/vertical-bar-chart.scss index ea10cb1c..012a0d71 100644 --- a/packages/VerticalBarChart/src/vertical-bar-chart.scss +++ b/packages/VerticalBarChart/src/vertical-bar-chart.scss @@ -23,6 +23,7 @@ --ids-vertical-bar-chart-tick-color: var(--hop-neutral-text-weak); --ids-vertical-bar-chart-tick-font-size: var(--hop-body-sm-font-size); --ids-vertical-bar-chart-label-line-height: var(--hop-body-sm-line-height); + --ids-vertical-bar-chart-solid-color: var(--hop-primary-surface-strong); } .ids-vertical-bar-chart { From 180d74676bbfabd4176a75bd17fa03d956bfbaab Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 2 May 2024 08:32:31 -0400 Subject: [PATCH 2/4] wip removal of gradient line in areachart --- packages/AreaChart/src/AreaChart.tsx | 66 +------------------------ packages/AreaChart/src/ChartTooltip.tsx | 2 +- packages/AreaChart/src/area-chart.scss | 2 +- 3 files changed, 3 insertions(+), 67 deletions(-) diff --git a/packages/AreaChart/src/AreaChart.tsx b/packages/AreaChart/src/AreaChart.tsx index d054fc20..4602565d 100644 --- a/packages/AreaChart/src/AreaChart.tsx +++ b/packages/AreaChart/src/AreaChart.tsx @@ -88,7 +88,7 @@ export interface AreaChartProps extends React.ComponentProps<"div"> { /** Whether or not the chart should resize */ isResponsive?: boolean; /** Update the default locale - * @deprecated This prop is deprecated and will be removed + * @deprecated This prop is deprecated and will be removed * in the next major version in favor of Igloo's provider */ locale?: string; @@ -111,24 +111,6 @@ export interface AreaChartProps extends React.ComponentProps<"div"> { const DEFAULT_SKELETON_WIDTH = 24; const DEFAULT_SKELETON_HEIGHT = 8; -const getScores = (data: DataSet[]): number[] => { - const scores = data.filter(score => score !== null).map(dataSet => dataSet.score) as number[]; - - return scores; -}; - -const getScoreMin = (data: DataSet[]): number => { - const min = Math.min(...getScores(data)); - - return min; -}; - -const getScoreMax = (data: DataSet[]): number => { - const max = Math.max(...getScores(data)); - - return max; -}; - const AreaChart: React.FunctionComponent = ({ className, dataSet, @@ -419,50 +401,6 @@ const AreaChart: React.FunctionComponent = ({ fill: "none" }; - const getDataHue = (score: number, scoreRange: DataRange): string => { - const scoreMin = (typeof scoreRange.min === "number") ? scoreRange.min : getScoreMin(dataSet); - const scoreMax = (typeof scoreRange.max === "number") ? scoreRange.max : getScoreMax(dataSet); - const relativeScore = Math.round((score - scoreMin) * 100) / 100; - const scale = Math.round((scoreMax - scoreMin) * 100) / 100; - const ratio = relativeScore / scale; - - if (ratio <= 0.06) { return "var(--hop-dataviz-diverging-sequence-1-negative5)"; } - if (ratio <= 0.12) { return "var(--hop-dataviz-diverging-sequence-1-negative4)"; } - if (ratio <= 0.3) { return "var(--hop-dataviz-diverging-sequence-1-negative3)"; } - if (ratio <= 0.43) { return "var(--hop-dataviz-diverging-sequence-1-negative2)"; } - if (ratio <= 0.56) { return "var(--hop-dataviz-diverging-sequence-1-neutral)"; } - if (ratio <= 0.68) { return "var(--hop-dataviz-diverging-sequence-1-positive2)"; } - if (ratio <= 0.81) { return "var(--hop-dataviz-diverging-sequence-1-positive3)"; } - if (ratio <= 0.94) { return "var(--hop-dataviz-diverging-sequence-1-positive4)"; } - - return "var(--hop-dataviz-diverging-sequence-1-positive5)"; - }; - - const buildAreaDefs = (): JSX.Element => { - return ( - - - - - - - - - - - - - - ); - }; - React.useEffect(() => { let updatedAreaChartData = []; @@ -556,7 +494,6 @@ const AreaChart: React.FunctionComponent = ({ margin={{ right: 26, top: 10, bottom: 10, left: 0 }} ref={setChartRef} > - {buildAreaDefs()} @@ -581,7 +518,6 @@ const AreaChart: React.FunctionComponent = ({ dateFormatter={tooltipDateFormatter} scoreFormatter={tooltipScoreFormatter} unavailableDataMessage={unavailableDataMessage} - getDataScoreHue={score => getDataHue(score, range)} /> } /> diff --git a/packages/AreaChart/src/ChartTooltip.tsx b/packages/AreaChart/src/ChartTooltip.tsx index 2c39c0c8..7d3e3666 100644 --- a/packages/AreaChart/src/ChartTooltip.tsx +++ b/packages/AreaChart/src/ChartTooltip.tsx @@ -46,7 +46,7 @@ const ChartTooltip: React.FunctionComponent = ( const formattedScore = formatter ? formatter(score) : score; return ( -
Date: Wed, 8 May 2024 17:37:05 -0400 Subject: [PATCH 3/4] revert to single line color for areachart --- .changeset/empty-lies-clap.md | 5 +++++ packages/AreaChart/src/area-chart.scss | 2 +- packages/AreaChart/src/chart-tooltip.scss | 4 ++-- packages/VerticalBarChart/src/VerticalBarChart.tsx | 8 -------- 4 files changed, 8 insertions(+), 11 deletions(-) create mode 100644 .changeset/empty-lies-clap.md diff --git a/.changeset/empty-lies-clap.md b/.changeset/empty-lies-clap.md new file mode 100644 index 00000000..f58cdff4 --- /dev/null +++ b/.changeset/empty-lies-clap.md @@ -0,0 +1,5 @@ +--- +"@igloo-ui/area-chart": patch +--- + +UI fix - Reverting to a solid colored line for complexity reasons diff --git a/packages/AreaChart/src/area-chart.scss b/packages/AreaChart/src/area-chart.scss index e6b3aa59..64191eaa 100644 --- a/packages/AreaChart/src/area-chart.scss +++ b/packages/AreaChart/src/area-chart.scss @@ -38,7 +38,7 @@ --ids-area-chart-grid-color: var(--hop-neutral-border-weakest); --ids-area-chart-axis-color: var(--hop-neutral-border-weak); --ids-area-chart-dot-stroke-color: var(--hop-neutral-icon-strong); - --ids-area-chart-line-color: purple; + --ids-area-chart-line-color: var(--hop-dataviz-categorical-2colorgroup-option4-category2); --ids-area-chart-null-line-color: var(--hop-neutral-border-weak); /* Empty Label */ diff --git a/packages/AreaChart/src/chart-tooltip.scss b/packages/AreaChart/src/chart-tooltip.scss index 127e6ede..86ee505a 100644 --- a/packages/AreaChart/src/chart-tooltip.scss +++ b/packages/AreaChart/src/chart-tooltip.scss @@ -60,12 +60,12 @@ --ids-chart-tooltip-score-text-font-weight: var(--hop-body-sm-font-weight); /* Circle */ - --ids-chart-tooltip-circle-secondary-background: var(--hop-dataviz-categorical-2colorgroup-option4-category2); + --ids-chart-tooltip-circle-secondary-background: var(--hop-dataviz-categorical-2colorgroup-option4-category1); --ids-chart-tooltip-circle-margin-right: var(--hop-space-inline-sm); --ids-chart-tooltip-circle-size: 0.75rem; .ids-tooltip-score__circle { - --ids-chart-tooltip-circle-background: var(--ids-tooltip-score-dot-color, var(--hop-dataviz-categorical-2colorgroup-option4-category1)); + --ids-chart-tooltip-circle-background: var(--ids-tooltip-score-dot-color, var(--hop-dataviz-categorical-2colorgroup-option4-category2)); } } diff --git a/packages/VerticalBarChart/src/VerticalBarChart.tsx b/packages/VerticalBarChart/src/VerticalBarChart.tsx index fd32f43e..77a0eac1 100644 --- a/packages/VerticalBarChart/src/VerticalBarChart.tsx +++ b/packages/VerticalBarChart/src/VerticalBarChart.tsx @@ -36,8 +36,6 @@ export interface VerticalBarChartProps extends React.ComponentProps<"div"> { height?: number; /** Whether or not the chart bars should be animated */ isAnimationActive?: boolean; - /** Whether or not the chart bars are following the heat colors */ - isSolid?: boolean; /** The label to be displayed on the bottom right of the chart */ maxLabel?: string; /** The label to be displayed on the bottom left of the chart */ @@ -50,7 +48,6 @@ const VerticalBarChart: React.FunctionComponent = ({ dataTest, height = 200, isAnimationActive = true, - isSolid = false, maxLabel = "10", minLabel = "0", ...rest @@ -90,7 +87,6 @@ const VerticalBarChart: React.FunctionComponent = ({ dataKey="value" radius={[5, 5, 0, 0]} isAnimationActive={isAnimationActive} - isSolid={isSolid} > {data.map((entry, index) => { const cellProps: CellProps = { @@ -102,10 +98,6 @@ const VerticalBarChart: React.FunctionComponent = ({ cellProps.fill = entry.color; } - if (isSolid) { - cellProps.fill = "var(--ids-vertical-bar-chart-solid-color)"; - } - return ; })} From 04a9b223354c06b550d80e33fe7282e198e7a219 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 8 May 2024 17:41:59 -0400 Subject: [PATCH 4/4] removed unnecessary verticalbarchart micro fixes --- packages/VerticalBarChart/src/VerticalBarChart.tsx | 1 - packages/VerticalBarChart/src/vertical-bar-chart.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/VerticalBarChart/src/VerticalBarChart.tsx b/packages/VerticalBarChart/src/VerticalBarChart.tsx index 77a0eac1..b43d5f79 100644 --- a/packages/VerticalBarChart/src/VerticalBarChart.tsx +++ b/packages/VerticalBarChart/src/VerticalBarChart.tsx @@ -93,7 +93,6 @@ const VerticalBarChart: React.FunctionComponent = ({ className: cx("ids-vertical-bar-chart__bar", entry.className), key: `cell-${index}` }; - if (entry.color) { cellProps.fill = entry.color; } diff --git a/packages/VerticalBarChart/src/vertical-bar-chart.scss b/packages/VerticalBarChart/src/vertical-bar-chart.scss index 012a0d71..ea10cb1c 100644 --- a/packages/VerticalBarChart/src/vertical-bar-chart.scss +++ b/packages/VerticalBarChart/src/vertical-bar-chart.scss @@ -23,7 +23,6 @@ --ids-vertical-bar-chart-tick-color: var(--hop-neutral-text-weak); --ids-vertical-bar-chart-tick-font-size: var(--hop-body-sm-font-size); --ids-vertical-bar-chart-label-line-height: var(--hop-body-sm-line-height); - --ids-vertical-bar-chart-solid-color: var(--hop-primary-surface-strong); } .ids-vertical-bar-chart {