Add new LineChartCumulative chart

Author: Passanelli

.storybook/preview.js

@@ -2,6 +2,7 @@ import {themes} from '@storybook/theming';
 import {PolarisVizProvider} from '@shopify/polaris-viz';
 import {DARK_THEME, LIGHT_THEME} from '../packages/polaris-viz/src/constants';
 import {useTheme} from '../packages/polaris-viz/src/hooks';
+import variables from '../packages/polaris-viz-core/src/styles/shared/_variables.scss';
 
 // https://github.com/storybookjs/storybook/issues/548
 const storiesOrder = {

packages/polaris-viz/src/components/Labels/hooks/useLabels.tsx

@@ -21,6 +21,8 @@ interface Props {
   targetWidth: number;
   onHeightChange?: Dispatch<SetStateAction<number>> | (() => void);
   align?: 'center' | 'left';
+  activeIndex?: number;
+  fillColor?: string;
 }
 
 export function useLabels({
@@ -29,6 +31,8 @@ export function useLabels({
   labels,
   onHeightChange = () => {},
   targetWidth,
+  activeIndex,
+  fillColor,
 }: Props) {
   const {characterWidths} = useChartContext();
 
@@ -77,6 +81,8 @@ export function useLabels({
           targetWidth,
           targetHeight: HORIZONTAL_LABEL_TARGET_HEIGHT,
           characterWidths,
+          activeIndex,
+          fillColor,
         });
       }
       case shouldDrawDiagonal: {
@@ -86,6 +92,8 @@ export function useLabels({
           longestLabelWidth,
           targetHeight: LINE_HEIGHT,
           targetWidth,
+          activeIndex,
+          fillColor,
         });
       }
       case shouldDrawVertical: {
@@ -94,6 +102,8 @@ export function useLabels({
           labels: preparedLabels,
           longestLabelWidth,
           targetWidth,
+          activeIndex,
+          fillColor,
         });
       }
       default: {
@@ -111,6 +121,8 @@ export function useLabels({
     characterWidths,
     preparedLabels,
     longestLabelWidth,
+    activeIndex,
+    fillColor,
   ]);
 
   useEffect(() => {

packages/polaris-viz/src/components/Labels/utilities/getDiagonalLabels.ts

@@ -17,6 +17,8 @@ interface Props {
   targetHeight: number;
   targetWidth: number;
   characterWidths: CharacterWidths;
+  activeIndex?: number;
+  fillColor?: string;
 }
 
 export function getDiagonalLabels({
@@ -25,6 +27,8 @@ export function getDiagonalLabels({
   longestLabelWidth,
   targetHeight,
   targetWidth,
+  activeIndex,
+  fillColor,
 }: Props) {
   const clampedTargetWidth = clamp({
     amount: longestLabelWidth,
@@ -44,6 +48,7 @@ export function getDiagonalLabels({
   const centerPoint = targetWidth / 2 - LINE_HEIGHT / 2;
 
   for (let i = 0; i < labels.length; i++) {
+    const isActiveIndex = activeIndex === i;
     lines[i] = [];
     lines[i].push({
       truncatedText: truncatedLabels[i].truncatedName,
@@ -56,6 +61,8 @@ export function getDiagonalLabels({
       height: LINE_HEIGHT,
       textAnchor: 'end',
       transform: `rotate(-45)`,
+      style: isActiveIndex ? {fontWeight: '600'} : undefined,
+      fill: isActiveIndex ? fillColor : undefined,
     });
   }
 

packages/polaris-viz/src/components/Labels/utilities/getHorizontalLabels.ts

@@ -16,6 +16,8 @@ interface Props {
   targetHeight: number;
   targetWidth: number;
   characterWidths: CharacterWidths;
+  activeIndex?: number;
+  fillColor?: string;
 }
 
 export function getHorizontalLabels({
@@ -25,6 +27,8 @@ export function getHorizontalLabels({
   targetHeight,
   targetWidth,
   characterWidths,
+  activeIndex,
+  fillColor,
 }: Props) {
   const truncatedLabels = truncateLabels({
     labels,
@@ -42,6 +46,7 @@ export function getHorizontalLabels({
     let line = '';
     let lineNumber = 0;
     const words = label.truncatedWords;
+    const isActiveIndex = activeIndex === index;
 
     // The reason we use a for loop here is we want
     // to be able to advance the loop below if we
@@ -84,6 +89,8 @@ export function getHorizontalLabels({
         height: LINE_HEIGHT,
         textAnchor: align === 'left' ? 'start' : 'middle',
         dominantBaseline: 'hanging',
+        style: isActiveIndex ? {fontWeight: '600'} : undefined,
+        fill: isActiveIndex ? fillColor : undefined,
       });
 
       lineNumber += 1;

packages/polaris-viz/src/components/Labels/utilities/getVerticalLabels.ts

@@ -13,13 +13,17 @@ interface Props {
   longestLabelWidth: number;
   labels: PreparedLabels[];
   characterWidths: CharacterWidths;
+  activeIndex?: number;
+  fillColor?: string;
 }
 
 export function getVerticalLabels({
   labels,
   characterWidths,
   longestLabelWidth,
   targetWidth,
+  activeIndex,
+  fillColor,
 }: Props) {
   const clampedTargetWidth = clamp({
     amount: longestLabelWidth,
@@ -38,6 +42,7 @@ export function getVerticalLabels({
   let longestString = 0;
 
   for (let i = 0; i < labels.length; i++) {
+    const isActiveIndex = activeIndex === i;
     lines[i] = [];
     lines[i].push({
       truncatedText: truncatedLabels[i].truncatedName,
@@ -49,6 +54,8 @@ export function getVerticalLabels({
       height: LINE_HEIGHT,
       textAnchor: 'end',
       transform: `translate(${targetWidth / 2}) rotate(-90)`,
+      style: isActiveIndex ? {fontWeight: '600'} : undefined,
+      fill: isActiveIndex ? fillColor : undefined,
     });
 
     if (truncatedLabels[i].truncatedWidth > longestString) {

packages/polaris-viz/src/components/LineChartCumulative/Chart.tsx

@@ -0,0 +1,174 @@
+import {useState, Fragment} from 'react';
+import {
+  useYScale,
+  LineSeries,
+  DEFAULT_THEME_NAME,
+  useChartPositions,
+  uniqueId,
+} from '@shopify/polaris-viz-core';
+import type {
+  XAxisOptions,
+  YAxisOptions,
+  LineChartDataSeriesWithDefaults,
+  LabelFormatter,
+} from '@shopify/polaris-viz-core';
+
+import {useIndexForLabels} from '../../hooks/useIndexForLabels';
+import {XAxis} from '../XAxis';
+import {useLegend} from '../LegendContainer';
+import {useTheme, useLinearLabelsAndDimensions} from '../../hooks';
+import {ChartElements} from '../ChartElements';
+
+import {PointsAndCrosshair} from './components';
+import {useFormatData, useFormattedLabels} from './hooks';
+import {yAxisMinMax} from './utilities';
+
+export interface ChartProps {
+  data: LineChartDataSeriesWithDefaults[];
+  emptyStateText?: string;
+  seriesNameFormatter: LabelFormatter;
+  theme?: string;
+  xAxisOptions: Required<XAxisOptions>;
+  yAxisOptions: Required<YAxisOptions>;
+  fixedActiveIndex: number;
+}
+
+export function Chart({
+  emptyStateText,
+  data,
+  seriesNameFormatter,
+  theme = DEFAULT_THEME_NAME,
+  xAxisOptions,
+  yAxisOptions,
+  fixedActiveIndex,
+}: ChartProps) {
+  const selectedTheme = useTheme(theme);
+
+  const [xAxisHeight, setXAxisHeight] = useState(0);
+
+  const {height, width} = useLegend({
+    data: [
+      {
+        shape: 'Line',
+        series: data,
+      },
+    ],
+    showLegend: false,
+    seriesNameFormatter,
+  });
+
+  const indexForLabels = useIndexForLabels(data);
+
+  const {formattedLabels} = useFormattedLabels({
+    data: [data[indexForLabels]],
+    labelFormatter: xAxisOptions.labelFormatter,
+    indexToKeep: [0, fixedActiveIndex, data[indexForLabels]?.data.length - 1],
+  });
+
+  const emptyState =
+    data.length === 0 || data.every((series) => series.data.length === 0);
+
+  const {minY, maxY} = yAxisMinMax(data);
+
+  const yScaleOptions = {
+    formatYAxisLabel: yAxisOptions.labelFormatter,
+    integersOnly: yAxisOptions.integersOnly,
+    fixedWidth: yAxisOptions.fixedWidth,
+    maxYOverride: yAxisOptions.maxYOverride,
+    max: maxY,
+    min: minY,
+    ticksOverride: yAxisOptions.ticksOverride,
+  };
+
+  const {longestSeriesLength, longestSeriesIndex} = useFormatData(data);
+
+  const {
+    drawableWidth,
+    drawableHeight,
+    chartXPosition,
+    chartYPosition,
+    xAxisBounds,
+  } = useChartPositions({
+    annotationsHeight: 0,
+    height,
+    width,
+    xAxisHeight,
+    yAxisWidth: 0,
+  });
+
+  const {xAxisDetails, xScale, labels} = useLinearLabelsAndDimensions({
+    data,
+    drawableWidth,
+    hideXAxis: false,
+    labels: formattedLabels,
+    longestSeriesLength,
+  });
+
+  const {yScale} = useYScale({
+    ...yScaleOptions,
+    drawableHeight,
+    verticalOverflow: selectedTheme.grid.verticalOverflow,
+  });
+
+  if (xScale == null || drawableWidth == null) {
+    return null;
+  }
+
+  const halfXAxisLabelWidth = xAxisDetails.labelWidth / 2;
+  const fillColor = data[data.length - 1].color as string;
+
+  return (
+    <Fragment>
+      <ChartElements.Svg
+        emptyState={emptyState}
+        emptyStateText={emptyStateText}
+        height={height}
+        role="table"
+        width={width}
+      >
+        <XAxis
+          allowLineWrap={xAxisOptions.allowLineWrap}
+          ariaHidden
+          labels={labels}
+          labelWidth={xAxisDetails.labelWidth}
+          onHeightChange={setXAxisHeight}
+          x={xAxisBounds.x - halfXAxisLabelWidth}
+          xScale={xScale}
+          y={xAxisBounds.y}
+          activeIndex={fixedActiveIndex}
+          fillColor={fillColor}
+        />
+
+        <g transform={`translate(${chartXPosition},${chartYPosition})`}>
+          {data.map((singleSeries, index) => {
+            return (
+              <LineSeries
+                activeLineIndex={-1}
+                data={singleSeries}
+                index={index}
+                key={`${name}-${index}`}
+                svgDimensions={{height: drawableHeight, width: drawableWidth}}
+                theme={theme}
+                xScale={xScale}
+                yScale={yScale}
+                type="default"
+              />
+            );
+          })}
+
+          <PointsAndCrosshair
+            activeIndex={fixedActiveIndex}
+            data={data}
+            drawableHeight={drawableHeight}
+            emptyState={emptyState}
+            longestSeriesIndex={longestSeriesIndex}
+            theme={theme}
+            tooltipId={uniqueId('lineChartCumulative')}
+            xScale={xScale}
+            yScale={yScale}
+          />
+        </g>
+      </ChartElements.Svg>
+    </Fragment>
+  );
+}