Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AreaChart Graph gradient line to solid line #807

Merged
merged 4 commits into from
May 9, 2024
Merged

AreaChart Graph gradient line to solid line #807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
708c292
added solid option to vertical bar
fraincs Apr 30, 2024
180d746
wip removal of gradient line in areachart
fraincs May 2, 2024
c150900
revert to single line color for areachart
fraincs May 8, 2024
04a9b22
removed unnecessary verticalbarchart micro fixes
fraincs May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/empty-lies-clap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@igloo-ui/area-chart": patch
---

UI fix - Reverting to a solid colored line for complexity reasons
66 changes: 1 addition & 65 deletions packages/AreaChart/src/AreaChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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<AreaChartProps> = ({
className,
dataSet,
Expand Down Expand Up @@ -419,50 +401,6 @@ const AreaChart: React.FunctionComponent<AreaChartProps> = ({
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 (
<defs>
<linearGradient
id="areaChartLineGradient"
x1="0"
y1="0"
x2="0"
y2="96%"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--hop-dataviz-diverging-sequence-1-positive5)" />
<stop offset="0.119792" stopColor="var(--hop-dataviz-diverging-sequence-1-positive4)" />
<stop offset="0.239583" stopColor="var(--hop-dataviz-diverging-sequence-1-positive3)" />
<stop offset="0.369792" stopColor="var(--hop-dataviz-diverging-sequence-1-positive2)" />
<stop offset="0.498366" stopColor="var(--hop-dataviz-diverging-sequence-1-neutral)" />
<stop offset="0.625" stopColor="var(--hop-dataviz-diverging-sequence-1-negative2)" />
<stop offset="0.75" stopColor="var(--hop-dataviz-diverging-sequence-1-negative3)" />
<stop offset="0.875" stopColor="var(--hop-dataviz-diverging-sequence-1-negative4)" />
<stop offset="1" stopColor="var(--hop-dataviz-diverging-sequence-1-negative5)" />
</linearGradient>
</defs>
);
};

React.useEffect(() => {
let updatedAreaChartData = [];

Expand Down Expand Up @@ -556,7 +494,6 @@ const AreaChart: React.FunctionComponent<AreaChartProps> = ({
margin={{ right: 26, top: 10, bottom: 10, left: 0 }}
ref={setChartRef}
>
{buildAreaDefs()}
<CartesianGrid {...cartesianGridConfig} />
<XAxis {...xAxisConfig} />
<YAxis {...yAxisConfig} />
Expand All @@ -581,7 +518,6 @@ const AreaChart: React.FunctionComponent<AreaChartProps> = ({
dateFormatter={tooltipDateFormatter}
scoreFormatter={tooltipScoreFormatter}
unavailableDataMessage={unavailableDataMessage}
getDataScoreHue={score => getDataHue(score, range)}
/>
}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/AreaChart/src/ChartTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const ChartTooltip: React.FunctionComponent<ChartTooltipProps> = (
const formattedScore = formatter ? formatter(score) : score;

return (
<div className="ids-tooltip-score"
<div className="ids-tooltip-score"
style={{
"--ids-tooltip-score-dot-color": dotColor ? dotColor : undefined
} as React.CSSProperties}
Expand Down
2 changes: 1 addition & 1 deletion packages/AreaChart/src/area-chart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: url("#areaChartLineGradient");
--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 */
Expand Down
4 changes: 2 additions & 2 deletions packages/AreaChart/src/chart-tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/VerticalBarChart/src/VerticalBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> = ({
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}
>
Expand Down
Loading