feat: Adds support for line dash styles in cartesian charts (#114)

Author: pan-kot

pages/01-cartesian-chart/line-dash-styles.page.tsx

@@ -0,0 +1,68 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { range } from "lodash";
+
+import { CartesianChart, CartesianChartProps } from "../../lib/components";
+import { dateFormatter } from "../common/formatters";
+import { useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+
+const startDate = new Date(1600984800000); // 2020-09-25T06:00:00.000Z
+const endDate = new Date(1601014500000); // 2020-09-25T14:00:00.000Z
+const domain = range(startDate.getTime(), endDate.getTime(), 15 * 60 * 1000).map((time) => new Date(time));
+const rawData = [
+  58020, 102402, 104920, 94031, 125021, 159219, 193082, 162592, 274021, 264286, 289210, 256362, 257306, 186776, 294020,
+  385975, 486039, 490447, 361845, 339058, 298028, 231902, 224558, 253901, 102839, 234943, 204405, 190391, 183570,
+  162592, 148910, 229492, 293910,
+];
+
+function createSeries(offset: number, dashStyle?: Highcharts.DashStyleValue): CartesianChartProps.SeriesOptions {
+  return {
+    name: `spline-${dashStyle ?? "default"}`,
+    type: "spline",
+    dashStyle,
+    data: rawData.map((y, index) => ({
+      x: domain[index].getTime(),
+      y: offset + y + Math.round((index * 0.5 - 20) * (index + 5) * 5000),
+    })),
+  };
+}
+const series: CartesianChartProps.SeriesOptions[] = [
+  createSeries(0),
+  createSeries(50_000, "Dash"),
+  createSeries(250_000, "DashDot"),
+  createSeries(440_000, "Dot"),
+  createSeries(789_000, "LongDash"),
+  createSeries(999_000, "LongDashDot"),
+  createSeries(1_132_000, "LongDashDotDot"),
+  createSeries(1_350_000, "ShortDash"),
+  createSeries(1_400_000, "ShortDashDot"),
+  createSeries(1_560_000, "ShortDashDotDot"),
+  createSeries(1_880_000, "ShortDot"),
+  createSeries(2_000_000, "Solid"),
+  { type: "x-threshold", name: "threshold-default", value: 1601000100000 },
+  { type: "y-threshold", name: "threshold-DashDot", value: 1_500_000, dashStyle: "DashDot" },
+];
+
+export default function () {
+  const { chartProps } = useChartSettings();
+  return (
+    <Page title="Dash style demo" subtitle="This pages shows all supported line dash styles for line-like series.">
+      <CartesianChart
+        {...chartProps.cartesian}
+        chartHeight={700}
+        ariaLabel="Line chart"
+        series={series}
+        xAxis={{
+          type: "datetime",
+          title: "Time (UTC)",
+          min: domain[0].getTime(),
+          max: domain[domain.length - 1].getTime(),
+          valueFormatter: dateFormatter,
+        }}
+        yAxis={{ title: "Bytes transferred" }}
+      />
+    </Page>
+  );
+}

pages/01-cartesian-chart/many-series.page.tsx

@@ -13,7 +13,7 @@ const loremIpsum =
 export default function () {
   return (
     <Page
-      title="Legend demo"
+      title="Chart with many series"
       subtitle="This pages shows how legend works in a chart with many series."
       settings={
         <PageSettingsForm

src/cartesian-chart/chart-series-cartesian.tsx

@@ -27,10 +27,10 @@ export const transformCartesianSeries = (
     const seriesId = getOptionsId(s);
     const style = { ...Styles.thresholdPlotLine, color: s.color ?? Styles.thresholdPlotLine.color };
     if (s.type === "x-threshold" && visibleSeries.includes(seriesId)) {
-      xPlotLines.push({ id: seriesId, value: s.value, ...style });
+      xPlotLines.push({ id: seriesId, value: s.value, ...style, dashStyle: s.dashStyle ?? style.dashStyle });
     }
     if (s.type === "y-threshold" && visibleSeries.includes(seriesId)) {
-      yPlotLines.push({ id: seriesId, value: s.value, ...style });
+      yPlotLines.push({ id: seriesId, value: s.value, ...style, dashStyle: s.dashStyle ?? style.dashStyle });
     }
   }
   // The threshold series require data points to enable keyboard navigation and hover effects.

src/cartesian-chart/index.tsx

@@ -108,7 +108,7 @@ function transformLineLikeSeries<
     | CartesianChartProps.SplineSeriesOptions,
 >(s: S): null | S {
   const data = transformPointData(s.data);
-  return { type: s.type, id: s.id, name: s.name, color: s.color, data } as S;
+  return { type: s.type, id: s.id, name: s.name, color: s.color, dashStyle: s.dashStyle, data } as S;
 }
 
 function transformColumnSeries<S extends CartesianChartProps.ColumnSeriesOptions>(s: S): null | S {
@@ -125,7 +125,7 @@ function transformScatterSeries<S extends CartesianChartProps.ScatterSeriesOptio
 function transformThresholdSeries<
   S extends CartesianChartProps.XThresholdSeriesOptions | CartesianChartProps.YThresholdSeriesOptions,
 >(s: S): null | S {
-  return { type: s.type, id: s.id, name: s.name, color: s.color, value: s.value } as S;
+  return { type: s.type, id: s.id, name: s.name, color: s.color, value: s.value, dashStyle: s.dashStyle } as S;
 }
 
 function transformErrorBarSeries(

src/core/interfaces.ts

@@ -188,12 +188,12 @@ export interface BaseTooltipPointFormatted {
   subItems?: ReadonlyArray<{ key: React.ReactNode; value: React.ReactNode }>;
 }
 
-export interface AreaSeriesOptions extends BaseCartesianSeriesOptions {
+export interface AreaSeriesOptions extends BaseCartesianLineLikeOptions {
   type: "area";
   data: readonly PointDataItemType[];
 }
 
-export interface AreaSplineSeriesOptions extends BaseCartesianSeriesOptions {
+export interface AreaSplineSeriesOptions extends BaseCartesianLineLikeOptions {
   type: "areaspline";
   data: readonly PointDataItemType[];
 }
@@ -203,12 +203,12 @@ export interface ColumnSeriesOptions extends BaseCartesianSeriesOptions {
   data: readonly PointDataItemType[];
 }
 
-export interface LineSeriesOptions extends BaseCartesianSeriesOptions {
+export interface LineSeriesOptions extends BaseCartesianLineLikeOptions {
   type: "line";
   data: readonly PointDataItemType[];
 }
 
-export interface SplineSeriesOptions extends BaseCartesianSeriesOptions {
+export interface SplineSeriesOptions extends BaseCartesianLineLikeOptions {
   type: "spline";
   data: readonly PointDataItemType[];
 }
@@ -226,22 +226,22 @@ export interface ErrorBarSeriesOptions extends Omit<BaseCartesianSeriesOptions,
   linkedTo: string;
 }
 
-export interface XThresholdSeriesOptions extends BaseCartesianSeriesOptions {
+export interface XThresholdSeriesOptions extends BaseCartesianLineLikeOptions {
   type: "x-threshold";
   value: number;
 }
 
-export interface YThresholdSeriesOptions extends BaseCartesianSeriesOptions {
+export interface YThresholdSeriesOptions extends BaseCartesianLineLikeOptions {
   type: "y-threshold";
   value: number;
 }
 
-export interface PieSeriesOptions extends BaseCartesianSeriesOptions {
+export interface PieSeriesOptions extends BaseSeriesOptions {
   type: "pie";
   data: readonly PieSegmentOptions[];
 }
 
-export interface DonutSeriesOptions extends BaseCartesianSeriesOptions {
+export interface DonutSeriesOptions extends BaseSeriesOptions {
   type: "donut";
   data: readonly PieSegmentOptions[];
 }
@@ -266,12 +266,18 @@ export interface RangeDataItemOptions {
   high: number;
 }
 
-interface BaseCartesianSeriesOptions {
+interface BaseSeriesOptions {
   id?: string;
   name: string;
   color?: string;
 }
 
+type BaseCartesianSeriesOptions = BaseSeriesOptions;
+
+interface BaseCartesianLineLikeOptions extends BaseCartesianSeriesOptions {
+  dashStyle?: Highcharts.DashStyleValue;
+}
+
 // The symbols union matches that of Highcharts.PointMarkerOptionsObject
 interface PointMarkerOptions {
   symbol?: "circle" | "diamond" | "square" | "triangle" | "triangle-down";