@spscommerce/ds-react-charts 5.13.0 → 5.14.1

package/lib/index.es.js

@@ -20,6 +20,7 @@ var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
 import * as React from "react";
 import React__default, { useMemo, useState, useRef, useEffect, useContext, useCallback, createContext } from "react";
 import * as DSColors from "@spscommerce/ds-colors";
+import { colors } from "@spscommerce/ds-colors";
 import { SpsTooltip, useElementId } from "@spscommerce/ds-react";
 import { code } from "@spscommerce/utils";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -3028,10 +3029,10 @@ var interpolateRgb = function rgbGamma(y2) {
   return rgb$1;
 }(1);
 function rgbSpline(spline) {
-  return function(colors) {
-    var n2 = colors.length, r2 = new Array(n2), g = new Array(n2), b = new Array(n2), i2, color2;
+  return function(colors2) {
+    var n2 = colors2.length, r2 = new Array(n2), g = new Array(n2), b = new Array(n2), i2, color2;
     for (i2 = 0; i2 < n2; ++i2) {
-      color2 = rgb(colors[i2]);
+      color2 = rgb(colors2[i2]);
       r2[i2] = color2.r || 0;
       g[i2] = color2.g || 0;
       b[i2] = color2.b || 0;
@@ -8776,7 +8777,7 @@ function SpsStackedHorizontalBarChart(props) {
     }
     return `rgb(${r2}, ${g}, ${b})`;
   }
-  const colors = chartData.map((c2) => c2.color);
+  const colors2 = chartData.map((c2) => c2.color);
   const keys2 = chartData.map((c2) => c2.label);
   const values = chartData.map((c2) => c2.value);
   const valuesSum = values.reduce((pv, cv) => pv + cv, 0);
@@ -8793,7 +8794,7 @@ function SpsStackedHorizontalBarChart(props) {
   });
   const legendScale = createOrdinalScale$2({
     domain: keys2.map((c2) => `${c2}: ${(useAbsoluteLegend ? absoluteData : relativeData)[0][c2]}%`),
-    range: [...colors]
+    range: [...colors2]
   });
   const xMax = chartWidth - margin.left - margin.right;
   const yMax = chartHeight - margin.top - margin.bottom;
@@ -19875,41 +19876,44 @@ function LineSeries(props) {
 }
 const propsDoc = {
   lines: "LinesChartProps[]",
-  curveType: "linear | log | pow | sqrt | symlog | radial | time | utc | quantile | quantize | threshold | ordinal | point | band",
-  yAxis: "AxisType",
-  xAxis: "AxisType",
-  hideTicksX: "boolean",
-  hideTicksY: "boolean",
-  barTooltip: "(props: LineTooltipProps) => JSX.Element"
+  barTooltip: "(props: LineTooltipProps) => JSX.Element",
+  grid: "GridProps",
+  labels: "Array<string>",
+  xAxis: "CommonProps<AxisScale>",
+  xScale: "ScaleConfig<AxisScaleOutput, any, any>",
+  yAxis: "CommonProps<AxisScale>",
+  yScale: "ScaleConfig<AxisScaleOutput, any, any>"
 };
 const propTypes = {
+  barTooltip: fun(),
+  grid: impl(),
+  labels: propTypes$4.exports.arrayOf(propTypes$4.exports.string).isRequired,
   lines: propTypes$4.exports.arrayOf(impl()),
-  curveType: "linear",
-  yAxis: impl(),
   xAxis: impl(),
-  hideTicksX: propTypes$4.exports.bool,
-  hideTicksY: propTypes$4.exports.bool,
-  barTooltip: fun()
+  xScale: impl().isRequired,
+  yAxis: impl(),
+  yScale: impl().isRequired
 };
 function SpsLineChart(props) {
   const componentKey = useElementId(null);
   const {
     lines,
-    curveType,
-    yAxis,
+    xScale,
+    yScale,
     xAxis,
-    hideTicksX,
-    hideTicksY,
+    yAxis,
+    grid,
+    labels,
     barTooltip: BarTooltip
   } = props;
   const accessors = {
     xAccessor: (d) => d.x,
     yAccessor: (d) => d.y
   };
-  const tickFormat2 = (i2) => `${xAxis == null ? void 0 : xAxis.labels[i2]}`;
+  const tickFormat2 = (i2) => labels[i2];
   const legendScale = createOrdinalScale$2({
     domain: lines.map((c2) => c2.name),
-    range: lines.map((c2) => c2.color)
+    range: lines.map((c2) => colors[c2.color])
   });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Ordinal, {
     className: "fs-12 lh-18 gray600",
@@ -19929,37 +19933,32 @@ function SpsLineChart(props) {
     }
   }), /* @__PURE__ */ React.createElement(XYChart, {
     height: 300,
-    xScale: { type: curveType },
-    yScale: { type: curveType }
-  }, /* @__PURE__ */ React.createElement(Axis, {
-    hideTicks: hideTicksX,
+    xScale,
+    yScale
+  }, /* @__PURE__ */ React.createElement(Axis, __spreadValues({
     strokeWidth: "1",
     orientation: "bottom",
     tickFormat: tickFormat2
-  }), /* @__PURE__ */ React.createElement(Axis, {
-    hideTicks: hideTicksY,
+  }, xAxis)), /* @__PURE__ */ React.createElement(Axis, __spreadValues({
     orientation: "left"
-  }), /* @__PURE__ */ React.createElement(Grid, {
-    rows: yAxis == null ? void 0 : yAxis.gridLines,
-    columns: xAxis == null ? void 0 : xAxis.gridLines
-  }), lines.map((line2, index2) => /* @__PURE__ */ React.createElement(React.Fragment, {
+  }, yAxis)), /* @__PURE__ */ React.createElement(Grid, __spreadValues({}, grid)), lines.map((line2, index2) => /* @__PURE__ */ React.createElement(React.Fragment, {
     key: `${componentKey.current}${index2}`
   }, /* @__PURE__ */ React.createElement(GlyphSeries, __spreadValues({
     dataKey: line2.name,
-    colorAccessor: () => line2.color,
+    colorAccessor: () => colors[line2.color],
     data: [line2.data]
   }, accessors)), /* @__PURE__ */ React.createElement(LineSeries, __spreadValues({
     dataKey: line2.name,
-    stroke: line2.color,
+    stroke: colors[line2.color],
     strokeDasharray: line2.strokeDashArray ? "4,3" : "",
     data: line2.data
   }, accessors)))), /* @__PURE__ */ React.createElement(Tooltip, {
     snapTooltipToDatumX: true,
     snapTooltipToDatumY: true,
     className: "bg-dark white",
-    renderTooltip: ({ tooltipData }) => /* @__PURE__ */ React.createElement("div", null, BarTooltip && /* @__PURE__ */ React.createElement(BarTooltip, {
+    renderTooltip: ({ tooltipData }) => /* @__PURE__ */ React.createElement(React.Fragment, null, BarTooltip && /* @__PURE__ */ React.createElement(BarTooltip, {
       yAxisName: tooltipData.nearestDatum.key,
-      xLineName: xAxis.labels[accessors.xAccessor(tooltipData.nearestDatum.datum)],
+      xLineName: labels[accessors.xAccessor(tooltipData.nearestDatum.datum)],
       value: accessors.yAccessor(tooltipData.nearestDatum.datum)
     }))
   })));
@@ -19972,86 +19971,81 @@ Object.assign(SpsLineChart, {
 const SpsLineChartExamples = {
   basic: {
     label: "Basic",
-    description: code`
-            <p>Line chart example.</p>
-        `,
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "Line chart example."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("code", null, "<grid>"), " allows override grid property. Optional. Type of ", /* @__PURE__ */ React.createElement("code", null, "GridProps"), " which comes from", /* @__PURE__ */ React.createElement("code", null, "@visx/xychart/lib/components/grid/Grid"), " package, which is a peer dependency of our React components."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("code", null, "<xAxis>"), " and ", /* @__PURE__ */ React.createElement("code", null, "<yAxis>"), " allow override X/Y axes property. Optional. Type of", /* @__PURE__ */ React.createElement("code", null, "CommonProps<AxisScale>"), " which comes from", /* @__PURE__ */ React.createElement("code", null, "@visx/axis/lib/types"), " package, which is a peer dependency of our React components."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("code", null, "<xScale>"), " and ", /* @__PURE__ */ React.createElement("code", null, "<yScale>"), " allow override scale configuration for X/Y axes. Type of", /* @__PURE__ */ React.createElement("code", null, "ScaleConfig<AxisScaleOutput, any, any>"), " comes from", /* @__PURE__ */ React.createElement("code", null, "@visx/scale"), " and ", /* @__PURE__ */ React.createElement("code", null, "@visx/axis"), " packages, which is a peer dependency of our React components.")),
     examples: {
       basic: {
         react: code`
-                    function DemoComponent() {
-                      const lines = [
-                        {
-                          data: [
-                            { x: 0, y: 30 },
-                            { x: 1, y: 45 },
-                            { x: 2, y: 85 },
-                            { x: 3, y: 20 },
-                            { x: 4, y: 10 },
-                            { x: 5, y: 90 },
-                            { x: 6, y: 30 },
-                            { x: 7, y: 100 },
-                            { x: 8, y: 70 },
-                            { x: 9, y: 50 },
-                          ],
-                          color: "#9d5b8d",
-                          name: "Line 1",
-                          strokeDashArray: true,
-                        },
-                        {
-                          data: [
-                            { x: 0, y: 10 },
-                            { x: 1, y: 30 },
-                            { x: 2, y: 70 },
-                            { x: 3, y: 70 },
-                            { x: 4, y: 40 },
-                            { x: 5, y: 90 },
-                            { x: 6, y: 80 },
-                            { x: 7, y: 80 },
-                            { x: 8, y: 100 },
-                            { x: 9, y: 30 },
-                          ],
-                          color: "#e97f1c",
-                          name: "Line 2",
-                        },
-                        {
-                          data: [
-                            { x: 0, y: 15 },
-                            { x: 1, y: 40 },
-                            { x: 2, y: 80 },
-                            { x: 3, y: 40 },
-                            { x: 4, y: 100 },
-                            { x: 5, y: 40 },
-                            { x: 6, y: 50 },
-                            { x: 7, y: 10 },
-                            { x: 8, y: 0 },
-                            { x: 9, y: 20 },
-                          ],
-                          color: "#2e995a",
-                          name: "Line 3",
-                        },
-                      ];
-                      const lineChartLabels = [
-                        'PRE', 'W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9'
-                      ];
-                      const BarTooltip = ({ yAxisName, xLineName, value }) => (
-                        <>
-                            <div className="font-weight-bold">{xLineName} <br /> {yAxisName}: {value}</div>
-                        </>
-                      )
-                        return (
-                            <SpsLineChart
-                              lines={lines} 
-                              yAxis={{
-                                gridLines: false,
-                              }} 
-                              xAxis={{
-                                labels: lineChartLabels
-                              }}
-                              barTooltip={BarTooltip}
-                            />
-                        )
-                    }
-                `
+          function DemoComponent() {
+            const lines = [
+              {
+                data: [
+                  { x: 0, y: 30 },
+                  { x: 1, y: 45 },
+                  { x: 2, y: 85 },
+                  { x: 3, y: 20 },
+                  { x: 4, y: 10 },
+                  { x: 5, y: 90 },
+                  { x: 6, y: 30 },
+                  { x: 7, y: 100 },
+                  { x: 8, y: 70 },
+                  { x: 9, y: 50 },
+                ],
+                color: LineChartColors.ORANGE,
+                name: "Line 1",
+                strokeDashArray: true,
+              },
+              {
+                data: [
+                  { x: 0, y: 10 },
+                  { x: 1, y: 30 },
+                  { x: 2, y: 70 },
+                  { x: 3, y: 70 },
+                  { x: 4, y: 40 },
+                  { x: 5, y: 90 },
+                  { x: 6, y: 80 },
+                  { x: 7, y: 80 },
+                  { x: 8, y: 100 },
+                  { x: 9, y: 30 },
+                ],
+                color: LineChartColors.GREEN,
+                name: "Line 2",
+              },
+              {
+                data: [
+                  { x: 0, y: 15 },
+                  { x: 1, y: 40 },
+                  { x: 2, y: 80 },
+                  { x: 3, y: 40 },
+                  { x: 4, y: 100 },
+                  { x: 5, y: 40 },
+                  { x: 6, y: 50 },
+                  { x: 7, y: 10 },
+                  { x: 8, y: 0 },
+                  { x: 9, y: 20 },
+                ],
+                color: LineChartColors.GREEN,
+                name: "Line 3",
+              },
+            ];
+            const lineChartLabels = [
+              'PRE', 'W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9'
+            ];
+            const BarTooltip = ({ yAxisName, xLineName, value }) => (
+                <div className="font-weight-bold">{xLineName} <br /> {yAxisName}: {value}</div>
+            );
+          
+            return (
+              <SpsLineChart
+                barTooltip={ BarTooltip }
+                grid={{ rows: false }}
+                labels={ lineChartLabels }
+                lines={lines}
+                xScale={{ type: 'linear' }}
+                yScale={{ type: 'linear' }}
+              />
+            )
+          }
+        `
       }
     }
   }

package/lib/lineChart/SpsLineChart.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+import type { ScaleConfig } from "@visx/scale";
+import type { CommonProps, AxisScale } from "@visx/axis/lib/types";
+import type { AxisScaleOutput } from "@visx/axis";
+import type { GridProps } from "@visx/xychart/lib/components/grid/Grid";
 import type { LineChartColors } from "@spscommerce/ds-shared";
 import * as PropTypes from "../prop-types";
 export interface LinesChartProps {
@@ -7,22 +11,19 @@ export interface LinesChartProps {
     color: LineChartColors;
     strokeDashArray?: boolean;
 }
-export interface AxisType {
-    gridLines: boolean;
-    labels: string[];
-}
 export interface LineChartData {
     x: number;
     y: number;
 }
 declare const propTypes: {
-    lines: PropTypes.Requireable<LinesChartProps[]>;
-    curveType: string;
-    yAxis: PropTypes.Requireable<AxisType>;
-    xAxis: PropTypes.Requireable<AxisType>;
-    hideTicksX: PropTypes.Requireable<boolean>;
-    hideTicksY: PropTypes.Requireable<boolean>;
     barTooltip: PropTypes.Requireable<(props: LineTooltipProps) => JSX.Element>;
+    grid: PropTypes.Requireable<GridProps>;
+    labels: PropTypes.Validator<string[]>;
+    lines: PropTypes.Requireable<LinesChartProps[]>;
+    xAxis: PropTypes.Requireable<CommonProps<AxisScale<AxisScaleOutput>>>;
+    xScale: PropTypes.Validator<ScaleConfig<AxisScaleOutput, any, any>>;
+    yAxis: PropTypes.Requireable<CommonProps<AxisScale<AxisScaleOutput>>>;
+    yScale: PropTypes.Validator<ScaleConfig<AxisScaleOutput, any, any>>;
 };
 export interface LineTooltipProps {
     yAxisName?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react-charts",
   "description": "SPS Design System React Chart components",
-  "version": "5.13.0",
+  "version": "5.14.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react-charts",
@@ -27,17 +27,17 @@
     "react-spring": "^8.0.27"
   },
   "peerDependencies": {
-    "@spscommerce/ds-colors": "5.13.0",
-    "@spscommerce/ds-shared": "5.13.0",
-    "@spscommerce/ds-react": "5.13.0",
-    "@spscommerce/utils": "5.13.0",
+    "@spscommerce/ds-colors": "5.14.1",
+    "@spscommerce/ds-shared": "5.14.1",
+    "@spscommerce/ds-react": "5.14.1",
+    "@spscommerce/utils": "5.14.1",
     "react": "^16.9.0"
   },
   "devDependencies": {
-    "@spscommerce/ds-colors": "5.13.0",
-    "@spscommerce/ds-shared": "5.13.0",
-    "@spscommerce/ds-react": "5.13.0",
-    "@spscommerce/utils": "5.13.0",
+    "@spscommerce/ds-colors": "5.14.1",
+    "@spscommerce/ds-shared": "5.14.1",
+    "@spscommerce/ds-react": "5.14.1",
+    "@spscommerce/utils": "5.14.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@types/react": "^16.9.0",