@redsift/charts 11.5.0 → 11.6.0-muiv5-alpha.0

package/components/LineChart/types.d.ts

@@ -0,0 +1,90 @@
+import { ValueOf, Theme } from '@redsift/design-system';
+import { ReactNode, ReactElement, MutableRefObject } from 'react';
+import { SortingMethod } from '../../utils/index.js';
+import { ChartDimensions, MarginProps, ChartSize } from '../../types/size.js';
+import { ChartContainerProps } from '../ChartContainer/types.js';
+import { ChartAxesProps } from '../../types/axis.js';
+import { TwoCategoryData, DotDatum, Statistics } from '../../types/data.js';
+import { DotProps } from '../Dot/types.js';
+import { AnchorProps } from '../DataPoint/types.js';
+import { LegendProps } from '../Legend/types.js';
+import { ChartTheme } from '../../types/theme.js';
+import { TooltipVariant } from '../../types/legend.js';
+
+/**
+ * Component's labels variant.
+ */
+declare const LineChartLegendVariant: {
+    readonly none: "none";
+    readonly externalLabel: "externalLabel";
+    readonly externalLabelValue: "externalLabelValue";
+    readonly externalLabelPercent: "externalLabelPercent";
+    readonly custom: "custom";
+};
+type LineChartLegendVariant = ValueOf<typeof LineChartLegendVariant>;
+interface LocaleText {
+    emptyChartText: string;
+}
+type LineChartDimensions = ChartDimensions & {
+    fontSize: number;
+};
+/**
+ * Component props.
+ */
+interface LineChartProps extends ChartContainerProps, ChartAxesProps {
+    /** Dataset to use to generate the chart. */
+    data?: TwoCategoryData;
+    /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */
+    dotRole?: DotProps['role'];
+    /** Component to use if the chart is empty (replacing the default one). */
+    emptyComponent?: ReactNode;
+    /** Method used to define the anchor props to use when the dot is a navigation link. */
+    getDotAnchorProps?: (datum: DotDatum) => AnchorProps;
+    /** Method to determine whether a dot is selected or not. */
+    isDotSelected?: (datum: DotDatum) => boolean | undefined;
+    /** Method to override the data point labels. */
+    labelDecorator?: (datum: DotDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Method modifying what's displayed within the legend when the legendVariant is "custom". */
+    legendDecorator?: (datum: DotDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
+    legendVariant?: LineChartLegendVariant;
+    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
+        extraLegendItems?: Statistics;
+    };
+    /** Labels and texts. */
+    localeText?: LocaleText;
+    /** Custom margins, used to give more space for axes labels and legend for instance. */
+    margins?: MarginProps;
+    /** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */
+    onDotClick?: (datum: DotDatum) => void;
+    /** LineChart size. */
+    size?: ChartSize | LineChartDimensions;
+    /** Define how to sort categories. */
+    sortingMethod?: SortingMethod;
+    /** Reference to the SVG tag. */
+    svgRef?: MutableRefObject<SVGSVGElement>;
+    /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
+    colorTheme?: ChartTheme;
+    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
+    tooltipDecorator?: (data: DotDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Tooltip variant. */
+    tooltipVariant?: TooltipVariant;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledLineChartProps = LineChartProps & {};
+
+export { LineChartDimensions, LineChartLegendVariant, LineChartProps, StyledLineChartProps };

package/components/LineChart/types.js

@@ -0,0 +1,17 @@
+/**
+ * Component's labels variant.
+ */
+const LineChartLegendVariant = {
+  none: 'none',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
+};
+
+/**
+ * Component props.
+ */
+
+export { LineChartLegendVariant };
+//# sourceMappingURL=types.js.map

package/components/LineChart/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/LineChart/types.ts"],"sourcesContent":["import {\n  ChartDimensions,\n  ChartSize,\n  ChartTheme,\n  TooltipVariant,\n  DotDatum,\n  TwoCategoryData,\n  ChartAxesProps,\n  MarginProps,\n  Statistics,\n} from '../../types';\nimport { Theme, ValueOf } from '@redsift/design-system';\nimport { ChartContainerProps } from '../ChartContainer';\nimport { MutableRefObject, ReactElement, ReactNode } from 'react';\nimport { DotProps } from '../Dot';\nimport { LegendProps } from '../Legend';\nimport { SortingMethod } from '../../utils';\nimport { AnchorProps } from '../DataPoint';\n\n/**\n * Component's labels variant.\n */\nexport const LineChartLegendVariant = {\n  none: 'none',\n  externalLabel: 'externalLabel',\n  externalLabelValue: 'externalLabelValue',\n  externalLabelPercent: 'externalLabelPercent',\n  custom: 'custom',\n} as const;\nexport type LineChartLegendVariant = ValueOf<typeof LineChartLegendVariant>;\n\ninterface LocaleText {\n  emptyChartText: string;\n}\n\nexport type LineChartDimensions = ChartDimensions & {\n  fontSize: number;\n};\n\n/**\n * Component props.\n */\nexport interface LineChartProps extends ChartContainerProps, ChartAxesProps {\n  /** Dataset to use to generate the chart. */\n  data?: TwoCategoryData;\n  /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */\n  dotRole?: DotProps['role'];\n  /** Component to use if the chart is empty (replacing the default one). */\n  emptyComponent?: ReactNode;\n  /** Method used to define the anchor props to use when the dot is a navigation link. */\n  getDotAnchorProps?: (datum: DotDatum) => AnchorProps;\n  /** Method to determine whether a dot is selected or not. */\n  isDotSelected?: (datum: DotDatum) => boolean | undefined;\n  /** Method to override the data point labels. */\n  labelDecorator?: (\n    datum: DotDatum,\n    props?: { index?: number; isSelected?: boolean; color?: string }\n  ) => string | ReactElement;\n  /** Method modifying what's displayed within the legend when the legendVariant is \"custom\". */\n  legendDecorator?: (\n    datum: DotDatum,\n    props?: { index?: number; isSelected?: boolean; color?: string }\n  ) => string | ReactElement;\n  /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to \"custom\", use `legendDecorator` to customize it. */\n  legendVariant?: LineChartLegendVariant;\n  /** Props to forward to the Legend block. Can be used to make the legend selectable. */\n  legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & { extraLegendItems?: Statistics };\n  /** Labels and texts. */\n  localeText?: LocaleText;\n  /** Custom margins, used to give more space for axes labels and legend for instance. */\n  margins?: MarginProps;\n  /** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */\n  onDotClick?: (datum: DotDatum) => void;\n  /** LineChart size. */\n  size?: ChartSize | LineChartDimensions;\n  /** Define how to sort categories. */\n  sortingMethod?: SortingMethod;\n  /** Reference to the SVG tag. */\n  svgRef?: MutableRefObject<SVGSVGElement>;\n  /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */\n  colorTheme?: ChartTheme;\n  /** Method modifying what's displayed within the tooltip when the tooltipVariant is \"custom\".  */\n  tooltipDecorator?: (\n    data: DotDatum,\n    props?: { index?: number; isSelected?: boolean; color?: string }\n  ) => string | ReactElement;\n  /** Tooltip variant. */\n  tooltipVariant?: TooltipVariant;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport type StyledLineChartProps = LineChartProps & {};\n"],"names":["LineChartLegendVariant","none","externalLabel","externalLabelValue","externalLabelPercent","custom"],"mappings":"AAmBA;AACA;AACA;AACO,MAAMA,sBAAsB,GAAG;AACpCC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,oBAAoB,EAAE,sBAAsB;AAC5CC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAU;;AAWV;AACA;AACA;;;;"}

package/components/LineChart/utils.js

@@ -0,0 +1,67 @@
+import { getSortingMethod } from '../../utils/index.js';
+import { ChartSize } from '../../types/size.js';
+
+const sizeToDimension = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case ChartSize.small:
+      return {
+        width: 600,
+        height: 300,
+        fontSize: 30
+      };
+    case ChartSize.medium:
+    default:
+      return {
+        width: 750,
+        height: 375,
+        fontSize: 34
+      };
+    case ChartSize.large:
+      return {
+        width: 900,
+        height: 450,
+        fontSize: 38
+      };
+  }
+};
+const statsBy = (arr, sortingMethod) => {
+  const counts = arr.reduce((prev, curr) => {
+    if (!curr.value) {
+      return prev;
+    }
+    if (!prev[curr.key[1]]) {
+      prev[curr.key[1]] = {
+        value: curr.value,
+        min: curr.value,
+        max: curr.value,
+        values: [curr.value]
+      };
+    } else {
+      prev[curr.key[1]] = {
+        value: prev[curr.key[1]].value + curr.value,
+        min: Math.min(prev[curr.key[1]].min, curr.value),
+        max: Math.max(prev[curr.key[1]].max, curr.value),
+        values: [...prev[curr.key[1]].values, curr.value]
+      };
+    }
+    return prev;
+  }, {});
+  return Object.keys(counts).map(key => ({
+    key: key,
+    value: counts[key].value,
+    min: counts[key].min,
+    max: counts[key].max,
+    values: counts[key].values,
+    first: counts[key].values[0],
+    last: counts[key].values[counts[key].values.length - 1],
+    trending: {
+      overall: (counts[key].values[counts[key].values.length - 1] - counts[key].values[0]) * 100 / counts[key].values[0]
+    }
+  })).sort(getSortingMethod(sortingMethod));
+};
+
+export { sizeToDimension, statsBy };
+//# sourceMappingURL=utils.js.map

package/components/LineChart/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/LineChart/utils.ts"],"sourcesContent":["import { ScaleLinear as d3ScaleLinear } from 'd3';\n\nimport { CoordinatesCategoryData, CoordinatesCategoryDatum, Statistics, TwoCategoryData } from '../../types';\n\nimport { ChartSize } from '../../types';\nimport { LineChartDimensions } from './types';\nimport { SortingMethod, getSortingMethod } from '../../utils';\n\nexport const sizeToDimension = (size: ChartSize | LineChartDimensions): LineChartDimensions => {\n  if (typeof size !== 'string') {\n    return size;\n  }\n\n  switch (size) {\n    case ChartSize.small:\n      return { width: 600, height: 300, fontSize: 30 };\n    case ChartSize.medium:\n    default:\n      return { width: 750, height: 375, fontSize: 34 };\n    case ChartSize.large:\n      return { width: 900, height: 450, fontSize: 38 };\n  }\n};\n\nexport const BASE_NUMBER_OF_TICKS = 20;\n\nexport const getClosestLineIndex = (value: number, scale: d3ScaleLinear<number, number, never>) => {\n  const ticks = scale.ticks(BASE_NUMBER_OF_TICKS);\n  const delta = ticks[1] - ticks[0];\n  const index = Math.round(value / delta);\n  const roundValue = index * delta;\n  return [index, roundValue];\n};\n\nexport const group = (\n  data: CoordinatesCategoryData,\n  x: d3ScaleLinear<number, number, never>,\n  y: d3ScaleLinear<number, number, never>\n) => {\n  const groupDict: Record<\n    string,\n    {\n      category: string;\n      x: number;\n      y: number;\n      data: CoordinatesCategoryDatum;\n      points: CoordinatesCategoryData;\n    }\n  > = {};\n\n  data.forEach((d) => {\n    const [i, rx] = getClosestLineIndex(d.key[0], x);\n    const [j, ry] = getClosestLineIndex(d.key[1], y);\n\n    const key = `${i}_${j}_${d.key[2]}`;\n    if (!(key in groupDict)) {\n      groupDict[key] = {\n        category: d.key[2] as string,\n        x: rx,\n        y: ry,\n        data: {\n          key: d.key,\n          value: 0,\n        },\n        points: [],\n      };\n    }\n\n    groupDict[key].points.push(d);\n    groupDict[key].data.value += 1;\n  });\n\n  return Object.values(groupDict);\n};\n\nexport const countBy = (arr: CoordinatesCategoryData, sortingMethod: SortingMethod) => {\n  const counts = arr.reduce(\n    (prev, curr) => ((prev[curr.key[2] as string] = ++(prev[curr.key[2] as string] as number) || 1), prev),\n    {} as Record<string, number>\n  );\n\n  return Object.keys(counts)\n    .map((key) => ({ key: key, value: counts[key] as number }))\n    .sort(getSortingMethod(sortingMethod));\n};\n\nexport const statsBy: (arr: TwoCategoryData, sortingMethod: SortingMethod) => Statistics = (arr, sortingMethod) => {\n  const counts = arr.reduce((prev, curr) => {\n    if (!curr.value) {\n      return prev;\n    }\n    if (!prev[curr.key[1] as string]) {\n      prev[curr.key[1] as string] = {\n        value: curr.value,\n        min: curr.value,\n        max: curr.value,\n        values: [curr.value],\n      };\n    } else {\n      prev[curr.key[1] as string] = {\n        value: prev[curr.key[1] as string].value + curr.value,\n        min: Math.min(prev[curr.key[1] as string].min, curr.value),\n        max: Math.max(prev[curr.key[1] as string].max, curr.value),\n        values: [...prev[curr.key[1] as string].values, curr.value],\n      };\n    }\n    return prev;\n  }, {} as Record<string, { value: number; min: number; max: number; values: number[] }>);\n\n  return Object.keys(counts)\n    .map((key) => ({\n      key: key,\n      value: counts[key].value,\n      min: counts[key].min,\n      max: counts[key].max,\n      values: counts[key].values,\n      first: counts[key].values[0],\n      last: counts[key].values[counts[key].values.length - 1],\n      trending: {\n        overall:\n          ((counts[key].values[counts[key].values.length - 1] - counts[key].values[0]) * 100) / counts[key].values[0],\n      },\n    }))\n    .sort(getSortingMethod(sortingMethod));\n};\n"],"names":["sizeToDimension","size","ChartSize","small","width","height","fontSize","medium","large","statsBy","arr","sortingMethod","counts","reduce","prev","curr","value","key","min","max","values","Math","Object","keys","map","first","last","length","trending","overall","sort","getSortingMethod"],"mappings":"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"}

package/components/PieChart/EmptyPieChart.js

@@ -0,0 +1,85 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import { arc } from 'd3';
+import { PieChartVariant } from './types.js';
+import { StyledPieChart, StyledPieChartEmptyText } from './styles.js';
+import { empty } from '../../scheme.js';
+import { sizeToDimension } from './utils.js';
+import { useTheme } from '@redsift/design-system';
+import { Arcs } from '../Arcs/Arcs.js';
+
+const _excluded = ["className", "emptyComponent", "localeText", "size", "variant"];
+const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      emptyComponent,
+      localeText,
+      size,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme();
+  const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
+  const {
+    width,
+    height,
+    fontSize,
+    innerRadius
+  } = sizeToDimension(size);
+  const externalRadiusPadding = 8;
+  const createArc = arc().innerRadius(isDonut ? innerRadius : 0).outerRadius(width / 2 - externalRadiusPadding);
+  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledPieChartEmptyText, {
+    $maxWidth: innerRadius * 2,
+    $textSize: fontSize / 2,
+    $isDonut: isDonut,
+    $theme: theme
+  }, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default.createElement(Arcs, {
+    arcs: [{
+      createArc,
+      previousData: {
+        data: {
+          key: '',
+          value: 0
+        },
+        startAngle: 0,
+        endAngle: 0,
+        padAngle: 0,
+        value: 0,
+        index: 0
+      },
+      data: {
+        data: {
+          key: 'No Data',
+          value: 0
+        },
+        index: 0,
+        value: 0,
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+        padAngle: 0
+      },
+      dataset: [{
+        data: {
+          key: 'No Data',
+          value: 0
+        },
+        index: 0,
+        value: 0,
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+        padAngle: 0
+      }],
+      color: empty
+    }],
+    transform: `translate(${width / 2} ${height / 2})`
+  }))));
+});
+
+export { EmptyPieChart };
+//# sourceMappingURL=EmptyPieChart.js.map

package/components/PieChart/EmptyPieChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyPieChart.js","sources":["../../../src/components/PieChart/EmptyPieChart.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport { arc as d3arc } from 'd3';\n\nimport { ArcDatum } from '../../types';\nimport { PieChartProps, PieChartVariant } from './types';\nimport { StyledPieChart, StyledPieChartEmptyText } from './styles';\nimport { Arcs } from '../Arcs';\nimport { empty } from '../../scheme';\nimport { sizeToDimension } from './utils';\nimport { useTheme } from '@redsift/design-system';\n\nexport const EmptyPieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {\n  const { className, emptyComponent, localeText, size, variant, ...forwardedProps } = props;\n  const theme = useTheme();\n\n  const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;\n\n  const { width, height, fontSize, innerRadius } = sizeToDimension(size!);\n  const externalRadiusPadding = 8;\n\n  const createArc = d3arc<ArcDatum>()\n    .innerRadius(isDonut ? innerRadius : 0)\n    .outerRadius(width / 2 - externalRadiusPadding);\n\n  return (\n    <StyledPieChart {...forwardedProps} className={className} ref={ref as RefObject<HTMLDivElement>}>\n      {emptyComponent ?? (\n        <>\n          <StyledPieChartEmptyText\n            $maxWidth={innerRadius * 2}\n            $textSize={fontSize / 2}\n            $isDonut={isDonut}\n            $theme={theme}\n          >\n            <span>{localeText?.emptyChartText}</span>\n          </StyledPieChartEmptyText>\n          <svg width={width} height={height}>\n            <Arcs\n              arcs={[\n                {\n                  createArc,\n                  previousData: {\n                    data: {\n                      key: '',\n                      value: 0,\n                    },\n                    startAngle: 0,\n                    endAngle: 0,\n                    padAngle: 0,\n                    value: 0,\n                    index: 0,\n                  },\n                  data: {\n                    data: {\n                      key: 'No Data',\n                      value: 0,\n                    },\n                    index: 0,\n                    value: 0,\n                    startAngle: 0,\n                    endAngle: 2 * Math.PI,\n                    padAngle: 0,\n                  },\n                  dataset: [\n                    {\n                      data: {\n                        key: 'No Data',\n                        value: 0,\n                      },\n                      index: 0,\n                      value: 0,\n                      startAngle: 0,\n                      endAngle: 2 * Math.PI,\n                      padAngle: 0,\n                    },\n                  ],\n                  color: empty,\n                },\n              ]}\n              transform={`translate(${width / 2} ${height / 2})`}\n            />\n          </svg>\n        </>\n      )}\n    </StyledPieChart>\n  );\n});\n"],"names":["EmptyPieChart","forwardRef","props","ref","className","emptyComponent","localeText","size","variant","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","isDonut","PieChartVariant","donut","spacedDonut","width","height","fontSize","innerRadius","sizeToDimension","externalRadiusPadding","createArc","d3arc","outerRadius","React","createElement","StyledPieChart","_extends","Fragment","StyledPieChartEmptyText","$maxWidth","$textSize","$isDonut","$theme","emptyChartText","Arcs","arcs","previousData","data","key","value","startAngle","endAngle","padAngle","index","Math","PI","dataset","color","empty","transform"],"mappings":"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"}

package/components/PieChart/LoadingPieChart.js

@@ -0,0 +1,18 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import { StyledPieChart } from './styles.js';
+
+const _excluded = ["className"];
+const LoadingPieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), "Loading...");
+});
+
+export { LoadingPieChart };
+//# sourceMappingURL=LoadingPieChart.js.map

package/components/PieChart/LoadingPieChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingPieChart.js","sources":["../../../src/components/PieChart/LoadingPieChart.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\n\nimport { PieChartProps } from './types';\nimport { StyledPieChart } from './styles';\n\nexport const LoadingPieChart = forwardRef<HTMLDivElement, PieChartProps>(\n  (props, ref) => {\n    const { className, ...forwardedProps } = props;\n\n    return (\n      <StyledPieChart\n        {...forwardedProps}\n        className={className}\n        ref={ref as RefObject<HTMLDivElement>}\n      >\n        Loading...\n      </StyledPieChart>\n    );\n  }\n);\n"],"names":["LoadingPieChart","forwardRef","props","ref","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledPieChart","_extends"],"mappings":";;;;;AAKO,MAAMA,eAAe,gBAAGC,UAAU,CACvC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,MAAM;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGF,KAAK;AAAxBG,IAAAA,cAAc,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA,CAAA,CAAA;EAE9C,oBACEC,cAAA,CAAAC,aAAA,CAACC,cAAc,EAAAC,QAAA,KACTN,cAAc,EAAA;AAClBD,IAAAA,SAAS,EAAEA,SAAU;AACrBD,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EACvC,YAEe,CAAC,CAAA;AAErB,CACF;;;;"}

package/components/PieChart/PieChart.d.ts

@@ -0,0 +1,6 @@
+import { Comp } from '@redsift/design-system';
+import { PieChartProps } from './types.js';
+
+declare const PieChart: Comp<PieChartProps, HTMLDivElement>;
+
+export { PieChart };

package/components/PieChart/PieChart.js

@@ -0,0 +1,98 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useId } from '@redsift/design-system';
+import { PieChartVariant, PieChartLegendVariant } from './types.js';
+import { LoadingPieChart } from './LoadingPieChart.js';
+import { EmptyPieChart } from './EmptyPieChart.js';
+import { RenderedPieChart } from './RenderedPieChart.js';
+import { ColorTheme } from '../../types/theme.js';
+import { ChartSize } from '../../types/size.js';
+import { TooltipVariant } from '../../types/legend.js';
+
+const _excluded = ["caping", "chartRef", "className", "colorTheme", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "sortingMethod", "subtext", "text", "tooltipDecorator", "tooltipVariant", "variant"];
+const COMPONENT_NAME = 'PieChart';
+const CLASSNAME = 'redsift-piechart';
+const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      caping,
+      chartRef,
+      className,
+      colorTheme = ColorTheme.default,
+      data: propsData,
+      emptyComponent,
+      id: propsId,
+      isSliceSelected = () => true,
+      labelDecorator,
+      legendDecorator,
+      legendVariant: propsLegendVariant,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
+      middleText,
+      onSliceClick,
+      others = true,
+      size = ChartSize.medium,
+      sliceRole,
+      sortingMethod = 'desc-value',
+      subtext,
+      text,
+      tooltipDecorator,
+      tooltipVariant = TooltipVariant.value,
+      variant = PieChartVariant.spaced
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : PieChartLegendVariant.none;
+  if (propsData === undefined || propsData === null) {
+    return /*#__PURE__*/React__default.createElement(LoadingPieChart, _extends({
+      id: id
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  if (propsData.length === 0) {
+    return /*#__PURE__*/React__default.createElement(EmptyPieChart, _extends({
+      data: propsData,
+      emptyComponent: emptyComponent,
+      id: id,
+      localeText: localeText,
+      size: size,
+      sortingMethod: sortingMethod,
+      variant: variant
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(RenderedPieChart, _extends({
+    caping: caping,
+    chartRef: chartRef,
+    className: classNames(PieChart.className, className),
+    data: propsData,
+    id: id,
+    isSliceSelected: isSliceSelected,
+    labelDecorator: labelDecorator,
+    legendDecorator: legendDecorator,
+    legendVariant: legendVariant,
+    middleText: middleText,
+    onSliceClick: onSliceClick,
+    others: others,
+    size: size,
+    sliceRole: sliceRole,
+    sortingMethod: sortingMethod,
+    subtext: subtext,
+    text: text,
+    colorTheme: colorTheme,
+    tooltipDecorator: tooltipDecorator,
+    tooltipVariant: tooltipVariant,
+    variant: variant
+  }, forwardedProps, {
+    ref: ref
+  }));
+});
+PieChart.className = CLASSNAME;
+PieChart.displayName = COMPONENT_NAME;
+
+export { PieChart };
+//# sourceMappingURL=PieChart.js.map

package/components/PieChart/PieChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.js","sources":["../../../src/components/PieChart/PieChart.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, useId } from '@redsift/design-system';\n\nimport { ChartSize, ColorTheme, TooltipVariant } from '../../types';\nimport { PieChartLegendVariant, PieChartProps, PieChartVariant } from './types';\nimport { LoadingPieChart } from './LoadingPieChart';\nimport { EmptyPieChart } from './EmptyPieChart';\nimport { RenderedPieChart } from './RenderedPieChart';\n\nconst COMPONENT_NAME = 'PieChart';\nconst CLASSNAME = 'redsift-piechart';\n\nexport const PieChart: Comp<PieChartProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    caping,\n    chartRef,\n    className,\n    colorTheme = ColorTheme.default,\n    data: propsData,\n    emptyComponent,\n    id: propsId,\n    isSliceSelected = () => true,\n    labelDecorator,\n    legendDecorator,\n    legendVariant: propsLegendVariant,\n    localeText = { emptyChartText: 'No Data' },\n    middleText,\n    onSliceClick,\n    others = true,\n    size = ChartSize.medium,\n    sliceRole,\n    sortingMethod = 'desc-value',\n    subtext,\n    text,\n    tooltipDecorator,\n    tooltipVariant = TooltipVariant.value,\n    variant = PieChartVariant.spaced,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n\n  const legendVariant = propsLegendVariant ?? PieChartLegendVariant.none;\n\n  if (propsData === undefined || propsData === null) {\n    return <LoadingPieChart id={id} {...forwardedProps} ref={ref} />;\n  }\n\n  if (propsData.length === 0) {\n    return (\n      <EmptyPieChart\n        data={propsData}\n        emptyComponent={emptyComponent}\n        id={id}\n        localeText={localeText}\n        size={size}\n        sortingMethod={sortingMethod}\n        variant={variant}\n        {...forwardedProps}\n        ref={ref}\n      />\n    );\n  }\n\n  return (\n    <RenderedPieChart\n      caping={caping}\n      chartRef={chartRef}\n      className={classNames(PieChart.className, className)}\n      data={propsData}\n      id={id}\n      isSliceSelected={isSliceSelected}\n      labelDecorator={labelDecorator}\n      legendDecorator={legendDecorator}\n      legendVariant={legendVariant}\n      middleText={middleText}\n      onSliceClick={onSliceClick}\n      others={others}\n      size={size}\n      sliceRole={sliceRole}\n      sortingMethod={sortingMethod}\n      subtext={subtext}\n      text={text}\n      colorTheme={colorTheme}\n      tooltipDecorator={tooltipDecorator}\n      tooltipVariant={tooltipVariant}\n      variant={variant}\n      {...forwardedProps}\n      ref={ref}\n    />\n  );\n});\nPieChart.className = CLASSNAME;\nPieChart.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","PieChart","forwardRef","props","ref","caping","chartRef","className","colorTheme","ColorTheme","default","data","propsData","emptyComponent","id","propsId","isSliceSelected","labelDecorator","legendDecorator","legendVariant","propsLegendVariant","localeText","emptyChartText","middleText","onSliceClick","others","size","ChartSize","medium","sliceRole","sortingMethod","subtext","text","tooltipDecorator","tooltipVariant","TooltipVariant","value","variant","PieChartVariant","spaced","forwardedProps","_objectWithoutProperties","_excluded","_id","useId","PieChartLegendVariant","none","undefined","React","createElement","LoadingPieChart","_extends","length","EmptyPieChart","RenderedPieChart","classNames","displayName"],"mappings":"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"}

package/components/PieChart/RenderedPieChart.js

@@ -0,0 +1,198 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useEffect } from 'react';
+import { pie, arc, sum } from 'd3';
+import { useTheme, useMessageFormatter } from '@redsift/design-system';
+import intlMessages from './intl/index.js';
+import { PieChartVariant, PieChartLegendVariant } from './types.js';
+import { StyledPieChart, StyledPieChartCenterText } from './styles.js';
+import { sizeToDimension } from './utils.js';
+import { PieChart } from './PieChart.js';
+import { mergeLegends, getSortingMethod } from '../../utils/index.js';
+import { useFormatCategoricalData } from '../../hooks/useFormatCategoricalData.js';
+import { Arcs } from '../Arcs/Arcs.js';
+import { Legend } from '../Legend/Legend.js';
+import { LegendVariant } from '../../types/legend.js';
+
+const _excluded = ["caping", "className", "data", "disableAnimations", "getSliceAnchorProps", "id", "isHalf", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "sortingMethod", "subtext", "text", "colorTheme", "tooltipVariant", "variant"],
+  _excluded2 = ["extraLegendItems"];
+const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      caping,
+      className,
+      data: propsData,
+      disableAnimations,
+      getSliceAnchorProps,
+      id,
+      isHalf,
+      isSliceSelected,
+      labelDecorator,
+      legendDecorator,
+      legendVariant,
+      legendProps,
+      middleText: propsMiddleText,
+      onSliceClick,
+      others,
+      size,
+      sliceProps,
+      sliceRole,
+      sortingMethod,
+      subtext: propsSubtext,
+      text: propsText,
+      colorTheme,
+      tooltipVariant,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const cache = useRef();
+  const theme = useTheme();
+  const format = useMessageFormatter(intlMessages);
+  const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
+  const isSpaced = variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut;
+  const {
+    data,
+    colorScale
+  } = useFormatCategoricalData({
+    data: propsData,
+    colorTheme: colorTheme,
+    sortingMethod: sortingMethod,
+    caping,
+    others,
+    theme
+  });
+  useEffect(() => {
+    cache.current = data;
+  });
+  const {
+    width,
+    height,
+    smallFontSize,
+    fontSize,
+    innerRadius
+  } = sizeToDimension(size, isHalf);
+  const externalRadiusPadding = 8;
+  const createPie = pie().value(d => d.value).sort(null).startAngle(isHalf ? Math.PI * -0.5 : 0).endAngle(isHalf ? Math.PI * 0.5 : Math.PI * 2);
+  const createArc = arc().innerRadius(isDonut ? innerRadius : 0).outerRadius(width / 2 - externalRadiusPadding);
+  const pieData = createPie(data);
+  const previousPieData = cache.current ? createPie(cache.current) : undefined;
+  const total = sum(data, d => d.value);
+  const legendWidth = useRef();
+  if (data && !legendWidth.current) {
+    legendWidth.current = `${Math.max(...data.map(d => d.key.length + String(d.value).length)) * 8 + 32}px`;
+  }
+  const text = typeof propsText === 'function' ? propsText(pieData.map(datum => {
+    const percent = datum.data.value / total;
+    return _objectSpread2(_objectSpread2({}, datum), {}, {
+      data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
+        percent
+      })
+    });
+  }), total) : propsText;
+  const subtext = typeof propsSubtext === 'function' ? propsSubtext(pieData.map(datum => {
+    const percent = datum.data.value / total;
+    return _objectSpread2(_objectSpread2({}, datum), {}, {
+      data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
+        percent
+      })
+    });
+  }), total) : propsSubtext;
+  const middleText = typeof propsMiddleText === 'function' ? propsMiddleText(pieData.map(datum => {
+    const percent = datum.data.value / total;
+    return _objectSpread2(_objectSpread2({}, datum), {}, {
+      data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
+        percent
+      })
+    });
+  }), total) : propsMiddleText;
+  const filteredPieData = pieData.filter(datum => datum.data.value);
+  const _ref = legendProps || {},
+    {
+      extraLegendItems
+    } = _ref,
+    forwardedLegendProps = _objectWithoutProperties(_ref, _excluded2);
+  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({
+    mode: typeof onSliceClick === 'function' || typeof getSliceAnchorProps === 'function' ? 'interactive' : 'static',
+    definition: format('definition', {
+      sliceLength: filteredPieData.length
+    }),
+    dataTableRepresentation: {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Key"), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, filteredPieData.map(datum => /*#__PURE__*/React__default.createElement("tr", {
+        key: datum.data.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, datum.data.key), /*#__PURE__*/React__default.createElement("td", null, datum.data.value))))
+    }
+  }, forwardedProps, {
+    className: className,
+    id: id,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${PieChart.className}__chart-wrapper`
+  }, text ? /*#__PURE__*/React__default.createElement(StyledPieChartCenterText, {
+    $maxWidth: innerRadius * 2,
+    $textSize: fontSize,
+    $smallTextSize: smallFontSize,
+    $theme: theme
+  }, subtext ? /*#__PURE__*/React__default.createElement("b", null, text) : /*#__PURE__*/React__default.createElement("span", null, text), middleText ? /*#__PURE__*/React__default.createElement("b", null, middleText) : null, /*#__PURE__*/React__default.createElement("span", null, subtext)) : null, /*#__PURE__*/React__default.createElement("svg", {
+    width: width,
+    height: isHalf ? height + externalRadiusPadding : height,
+    "aria-label": typeof onSliceClick === 'function' || typeof getSliceAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
+  }, /*#__PURE__*/React__default.createElement(Arcs, {
+    arcs: filteredPieData.map((datum, index) => {
+      const percent = datum.data.value / total;
+      const from = previousPieData ? previousPieData[index] : {
+        data: {
+          key: '',
+          value: 0
+        },
+        startAngle: isHalf ? Math.PI * -0.5 : 0,
+        endAngle: isHalf ? Math.PI * -0.5 : 0,
+        padAngle: 0,
+        value: 0,
+        index: index
+      };
+      const to = _objectSpread2(_objectSpread2({}, datum), {}, {
+        data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
+          percent
+        })
+      });
+      return {
+        color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
+        createArc,
+        previousData: from,
+        id: `id${id}__arc-${index}`,
+        index,
+        isSelected: isSliceSelected(to),
+        key: `id${id}__arc-${index}`,
+        data: to,
+        dataset: pieData,
+        anchorProps: getSliceAnchorProps ? getSliceAnchorProps(to) : undefined
+      };
+    }),
+    disableAnimations: disableAnimations,
+    hasLabels: legendVariant === PieChartLegendVariant.internal,
+    hasStroke: isSpaced,
+    labelDecorator: labelDecorator,
+    onClick: onSliceClick,
+    role: sliceRole,
+    sliceProps: sliceProps,
+    tooltipVariant: tooltipVariant,
+    transform: `translate(${width / 2} ${isHalf ? height : height / 2})`
+  }))), legendVariant !== PieChartLegendVariant.none && legendVariant !== PieChartLegendVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+    data: (extraLegendItems ? mergeLegends(extraLegendItems, data).sort(getSortingMethod(sortingMethod)) : data).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
+    })),
+    variant: legendVariant === PieChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === PieChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === PieChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
+    width: legendWidth.current,
+    labelDecorator: labelDecorator ? (datum, props) => labelDecorator(datum, props) : undefined,
+    legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
+  }, forwardedLegendProps)) : null);
+});
+
+export { RenderedPieChart };
+//# sourceMappingURL=RenderedPieChart.js.map