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

package/components/BarChart/types.d.ts

@@ -0,0 +1,177 @@
+import { ComponentProps, ReactNode, ReactElement } from 'react';
+import { ScaleOrdinal, ScaleLinear, ScaleTime, ScalePoint } from 'd3';
+import { SortingMethod } from '../../utils/index.js';
+import { ValueOf, Theme } from '@redsift/design-system';
+import { FormatMessage } from '../../design-system/src/react-aria/react-aria/i18n/useMessageFormatter.js';
+import { ChartDimensions, MarginProps, ChartSize } from '../../types/size.js';
+import { ChartContainerProps } from '../ChartContainer/types.js';
+import { ChartAxesProps } from '../../types/axis.js';
+import { BarProps, BarDirection, BarOrientation } from '../Bar/types.js';
+import { CategoryData, LinearData, TwoCategoryData, BarDatum, Statistics, LinearDim } from '../../types/data.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 BarChartLegendVariant: {
+    readonly none: "none";
+    readonly externalLabel: "externalLabel";
+    readonly externalLabelValue: "externalLabelValue";
+    readonly externalLabelPercent: "externalLabelPercent";
+    readonly custom: "custom";
+};
+type BarChartLegendVariant = ValueOf<typeof BarChartLegendVariant>;
+interface LocaleText {
+    emptyChartText: string;
+}
+type BarChartDimensions = ChartDimensions & {
+    fontSize: number;
+    minWidth?: number;
+    maxWidth?: number;
+};
+type XScaleType = 'number' | 'Date' | 'dateString' | undefined;
+/**
+ * Component props.
+ */
+interface BarChartProps extends ChartContainerProps, ChartAxesProps {
+    /** @deprecated: Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. */
+    areXLabelsRotated?: boolean;
+    /** Native HTML props to forward to each bar. */
+    barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale' | 'direction'> & {
+        minWidth?: number;
+    };
+    /** Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. */
+    barRole?: BarProps['role'];
+    /** Number of categories to use, the rest being put into a new category called "Others". */
+    caping?: number;
+    /** 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;
+    /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
+    data?: CategoryData | LinearData | TwoCategoryData;
+    /** Data type override to skip data type inferrence. */
+    dataType?: 'TwoCategoryData' | 'LinearData' | 'CategoryData';
+    /**
+     * Direction of the bars. Only applied when the orientation is vertical. By default bars go "up" but can go "down".
+     * They can also go both ways in which case you need to indicates which category go which direction. The concatenation of the two arrays will be used to determine the order of the categories instead of the sortingMethod prop.
+     */
+    direction?: BarDirection;
+    /** 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 bar is a navigation link. */
+    getBarAnchorProps?: (datum: BarDatum) => AnchorProps;
+    /** Method to determine whether a bar is selected or not. */
+    isBarSelected?: (datum: BarDatum) => void;
+    /** Method to override the data labels. */
+    labelDecorator?: (datum: BarDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Method modifying what's displayed within the legend when the legendVariant is "custom". */
+    legendDecorator?: (datum: BarDatum, 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?: BarChartLegendVariant;
+    /** 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 bar. For a navigation link, please use `getBarAnchorProps` instead. */
+    onBarClick?: (datum: BarDatum, data: BarDatum[]) => void;
+    /** Orientation of the bar. */
+    orientation?: BarOrientation;
+    /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
+    others?: boolean | string;
+    /** BarChart size. */
+    size?: ChartSize | BarChartDimensions;
+    /** Define how to sort categories. */
+    sortingMethod?: SortingMethod;
+    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
+    tooltipDecorator?: (data: BarDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }, dataset?: ComputedBarProps[], groupedData?: ComputedBarProps[]) => string | ReactElement;
+    /** Tooltip variant. */
+    tooltipVariant?: TooltipVariant | 'grouped';
+    /** Theme. */
+    theme?: Theme;
+    /** X-scale type override to skip x-scale type inferrence. */
+    xScaleType?: XScaleType;
+    /**
+     * In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.
+     * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset)
+     */
+    xAxisStartDateOffset?: number;
+    /**
+     * In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.
+     * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset)
+     */
+    xAxisEndDateOffset?: number;
+    /** If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. */
+    yScaleLogBase?: number;
+}
+type StyledBarChartProps = BarChartProps & {};
+interface RenderedLinearBarChartProps extends Omit<BarChartProps, 'data' | 'caping' | 'orientation' | 'others'> {
+    data: LinearData | TwoCategoryData;
+}
+interface ComputedBarProps {
+    category: string;
+    key: LinearDim;
+    value: number;
+    cumulativeValue: number;
+}
+interface BarChartState extends ChartAxesProps, Required<Pick<RenderedLinearBarChartProps, 'margins'>>, Pick<RenderedLinearBarChartProps, 'barProps' | 'barRole' | 'colorTheme' | 'direction' | 'disableAnimations' | 'getBarAnchorProps' | 'id' | 'isBarSelected' | 'labelDecorator' | 'onBarClick' | 'tooltipVariant' | 'tooltipDecorator'> {
+    bars: ComputedBarProps[];
+    barWidth: number;
+    cache: React.MutableRefObject<LinearData | TwoCategoryData | undefined>;
+    categories: string[];
+    chartHeight: number;
+    chartWidth: number;
+    colorScale?: ScaleOrdinal<string, string>;
+    format: FormatMessage;
+    gap: number;
+    hasCategory: boolean;
+    scaleX: ScaleLinear<number, number, never> | ScaleTime<number, number, never> | ScalePoint<string>;
+    scaleY: ScaleLinear<number, number>;
+    sectionHeight?: number;
+    xScaleType?: XScaleType;
+}
+interface BarChartSectionProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role' | 'color'> {
+    /** Starting point in percentage of the chart height. */
+    from?: number;
+    /** Ending point in percentage of the chart height. */
+    to?: number;
+    /** Color. */
+    color?: 'red' | 'green' | {
+        textColor: string;
+        backgroundColor?: string;
+    };
+    /** Section title */
+    title?: string;
+    /** Title position relative to section */
+    titlePosition?: 'left' | 'center' | 'right';
+    scaleX?: ScaleLinear<number, number, never> | ScaleTime<number, number, never> | ScalePoint<string>;
+    scaleY?: ScaleLinear<number, number, never>;
+    direction?: BarDirection;
+}
+interface StyledBarChartSectionProps {
+    $theme: Theme;
+    $textColor: string;
+}
+interface BarChartBarsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'> {
+    category?: string;
+}
+type StyledBarChartBarsProps = Omit<BarChartBarsProps, 'category'> & {};
+
+export { BarChartBarsProps, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarChartSectionProps, BarChartState, ComputedBarProps, RenderedLinearBarChartProps, StyledBarChartBarsProps, StyledBarChartProps, StyledBarChartSectionProps, XScaleType };

package/components/BarChart/types.js

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

package/components/BarChart/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/BarChart/types.ts"],"sourcesContent":["import { ComponentProps, ReactElement, ReactNode } from 'react';\nimport {\n  ChartDimensions,\n  ChartSize,\n  ChartTheme,\n  BarDatum,\n  TooltipVariant,\n  CategoryData,\n  ChartAxesProps,\n  MarginProps,\n  LinearData,\n  TwoCategoryData,\n  Statistics,\n  LinearDim,\n} from '../../types';\nimport {\n  ScaleTime as d3ScaleTime,\n  ScaleLinear as d3ScaleLinear,\n  ScaleOrdinal as d3ScaleOrdinal,\n  ScalePoint as d3ScalePoint,\n} from 'd3';\nimport { ChartContainerProps } from '../ChartContainer';\nimport { BarDirection, BarOrientation, BarProps } from '../Bar';\nimport { SortingMethod } from '../../utils';\nimport { Theme, ValueOf } from '@redsift/design-system';\nimport { LegendProps } from '../Legend';\nimport { AnchorProps } from '../DataPoint';\nimport { FormatMessage } from '@redsift/design-system/react-aria/react-aria/i18n/useMessageFormatter';\n\n/**\n * Component's labels variant.\n */\nexport const BarChartLegendVariant = {\n  none: 'none',\n  externalLabel: 'externalLabel',\n  externalLabelValue: 'externalLabelValue',\n  externalLabelPercent: 'externalLabelPercent',\n  custom: 'custom',\n} as const;\nexport type BarChartLegendVariant = ValueOf<typeof BarChartLegendVariant>;\n\ninterface LocaleText {\n  emptyChartText: string;\n}\n\nexport type BarChartDimensions = ChartDimensions & {\n  fontSize: number;\n  minWidth?: number;\n  maxWidth?: number;\n};\n\nexport type XScaleType = 'number' | 'Date' | 'dateString' | undefined;\n\n/**\n * Component props.\n */\nexport interface BarChartProps extends ChartContainerProps, ChartAxesProps {\n  /** @deprecated: Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. */\n  areXLabelsRotated?: boolean;\n  /** Native HTML props to forward to each bar. */\n  barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale' | 'direction'> & {\n    minWidth?: number;\n  };\n  /** Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. */\n  barRole?: BarProps['role'];\n  /** Number of categories to use, the rest being put into a new category called \"Others\". */\n  caping?: number;\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  /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */\n  data?: CategoryData | LinearData | TwoCategoryData;\n  /** Data type override to skip data type inferrence. */\n  dataType?: 'TwoCategoryData' | 'LinearData' | 'CategoryData';\n  /**\n   * Direction of the bars. Only applied when the orientation is vertical. By default bars go \"up\" but can go \"down\".\n   * They can also go both ways in which case you need to indicates which category go which direction. The concatenation of the two arrays will be used to determine the order of the categories instead of the sortingMethod prop.\n   */\n  direction?: BarDirection;\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 bar is a navigation link. */\n  getBarAnchorProps?: (datum: BarDatum) => AnchorProps;\n  /** Method to determine whether a bar is selected or not. */\n  isBarSelected?: (datum: BarDatum) => void;\n  /** Method to override the data labels. */\n  labelDecorator?: (\n    datum: BarDatum,\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: BarDatum,\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?: BarChartLegendVariant;\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 bar. For a navigation link, please use `getBarAnchorProps` instead. */\n  onBarClick?: (datum: BarDatum, data: BarDatum[]) => void;\n  /** Orientation of the bar. */\n  orientation?: BarOrientation;\n  /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */\n  others?: boolean | string;\n  /** BarChart size. */\n  size?: ChartSize | BarChartDimensions;\n  /** Define how to sort categories. */\n  sortingMethod?: SortingMethod;\n  /** Method modifying what's displayed within the tooltip when the tooltipVariant is \"custom\".  */\n  tooltipDecorator?: (\n    data: BarDatum,\n    props?: { index?: number; isSelected?: boolean; color?: string },\n    dataset?: ComputedBarProps[],\n    groupedData?: ComputedBarProps[]\n  ) => string | ReactElement;\n  /** Tooltip variant. */\n  tooltipVariant?: TooltipVariant | 'grouped';\n  /** Theme. */\n  theme?: Theme;\n  /** X-scale type override to skip x-scale type inferrence. */\n  xScaleType?: XScaleType;\n  /**\n   * In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.\n   * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset)\n   */\n  xAxisStartDateOffset?: number;\n  /**\n   * In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.\n   * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset)\n   */\n  xAxisEndDateOffset?: number;\n  /** If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. */\n  yScaleLogBase?: number;\n}\n\nexport type StyledBarChartProps = BarChartProps & {};\n\nexport interface RenderedLinearBarChartProps extends Omit<BarChartProps, 'data' | 'caping' | 'orientation' | 'others'> {\n  data: LinearData | TwoCategoryData;\n}\nexport interface ComputedBarProps {\n  category: string;\n  key: LinearDim;\n  value: number;\n  cumulativeValue: number;\n}\n\nexport interface BarChartState\n  extends ChartAxesProps,\n    Required<Pick<RenderedLinearBarChartProps, 'margins'>>,\n    Pick<\n      RenderedLinearBarChartProps,\n      | 'barProps'\n      | 'barRole'\n      | 'colorTheme'\n      | 'direction'\n      | 'disableAnimations'\n      | 'getBarAnchorProps'\n      | 'id'\n      | 'isBarSelected'\n      | 'labelDecorator'\n      | 'onBarClick'\n      | 'tooltipVariant'\n      | 'tooltipDecorator'\n    > {\n  bars: ComputedBarProps[];\n  barWidth: number;\n  cache: React.MutableRefObject<LinearData | TwoCategoryData | undefined>;\n  categories: string[];\n  chartHeight: number;\n  chartWidth: number;\n  colorScale?: d3ScaleOrdinal<string, string>;\n  format: FormatMessage;\n  gap: number;\n  hasCategory: boolean;\n  scaleX: d3ScaleLinear<number, number, never> | d3ScaleTime<number, number, never> | d3ScalePoint<string>;\n  scaleY: d3ScaleLinear<number, number>;\n  sectionHeight?: number;\n  xScaleType?: XScaleType;\n}\n\nexport interface BarChartSectionProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role' | 'color'> {\n  /** Starting point in percentage of the chart height. */\n  from?: number;\n  /** Ending point in percentage of the chart height. */\n  to?: number;\n  /** Color. */\n  color?:\n    | 'red'\n    | 'green'\n    | {\n        textColor: string;\n        backgroundColor?: string;\n      };\n  /** Section title */\n  title?: string;\n  /** Title position relative to section */\n  titlePosition?: 'left' | 'center' | 'right';\n  scaleX?: d3ScaleLinear<number, number, never> | d3ScaleTime<number, number, never> | d3ScalePoint<string>;\n  scaleY?: d3ScaleLinear<number, number, never>;\n  direction?: BarDirection;\n}\n\nexport interface StyledBarChartSectionProps {\n  $theme: Theme;\n  $textColor: string;\n}\n\nexport interface BarChartBarsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'> {\n  category?: string;\n}\n\nexport type StyledBarChartBarsProps = Omit<BarChartBarsProps, 'category'> & {};\n"],"names":["BarChartLegendVariant","none","externalLabel","externalLabelValue","externalLabelPercent","custom"],"mappings":"AA6BA;AACA;AACA;AACO,MAAMA,qBAAqB,GAAG;AACnCC,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;;AAeV;AACA;AACA;;;;"}

package/components/BarChart/utils.js

@@ -0,0 +1,69 @@
+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: 300,
+        height: 200,
+        fontSize: 30
+      };
+    case ChartSize.large:
+      return {
+        width: 500,
+        height: 400,
+        fontSize: 38
+      };
+    case ChartSize.medium:
+    default:
+      return {
+        width: 400,
+        height: 300,
+        fontSize: 34
+      };
+  }
+};
+const statsBy = (arr, sortingMethod) => {
+  const isKeyArray = Array.isArray(arr[0].key);
+  const counts = arr.reduce((prev, curr) => {
+    if (!curr.value) {
+      return prev;
+    }
+    const currentKey = isKeyArray ? curr.key[1] : 'default';
+    if (!prev[currentKey]) {
+      prev[currentKey] = {
+        value: curr.value,
+        min: curr.value,
+        max: curr.value,
+        values: [curr.value]
+      };
+    } else {
+      prev[currentKey] = {
+        value: prev[currentKey].value + curr.value,
+        min: Math.min(prev[currentKey].min, curr.value),
+        max: Math.max(prev[currentKey].max, curr.value),
+        values: [...prev[currentKey].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/BarChart/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/BarChart/utils.ts"],"sourcesContent":["import { SortingMethod, getSortingMethod } from '@redsift/charts/utils';\nimport { ChartSize, LinearData, LinearDatum, Statistics, TwoCategoryData, TwoCategoryDatum } from '../../types';\nimport { BarChartDimensions } from './types';\n\nexport const sizeToDimension = (size: ChartSize | BarChartDimensions): BarChartDimensions => {\n  if (typeof size !== 'string') {\n    return size;\n  }\n\n  switch (size) {\n    case ChartSize.small:\n      return { width: 300, height: 200, fontSize: 30 };\n    case ChartSize.large:\n      return { width: 500, height: 400, fontSize: 38 };\n    case ChartSize.medium:\n    default:\n      return { width: 400, height: 300, fontSize: 34 };\n  }\n};\n\nexport const statsBy: (arr: LinearData | TwoCategoryData, sortingMethod: SortingMethod) => Statistics = (\n  arr,\n  sortingMethod\n) => {\n  const isKeyArray = Array.isArray(arr[0].key);\n\n  const counts = (arr as (LinearDatum | TwoCategoryDatum)[]).reduce((prev, curr) => {\n    if (!curr.value) {\n      return prev;\n    }\n    const currentKey = isKeyArray ? ((curr as TwoCategoryDatum).key[1] as string) : 'default';\n    if (!prev[currentKey as string]) {\n      prev[currentKey as string] = {\n        value: curr.value,\n        min: curr.value,\n        max: curr.value,\n        values: [curr.value],\n      };\n    } else {\n      prev[currentKey as string] = {\n        value: prev[currentKey as string].value + curr.value,\n        min: Math.min(prev[currentKey as string].min, curr.value),\n        max: Math.max(prev[currentKey as string].max, curr.value),\n        values: [...prev[currentKey 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","large","medium","statsBy","arr","sortingMethod","isKeyArray","Array","isArray","key","counts","reduce","prev","curr","value","currentKey","min","max","values","Math","Object","keys","map","first","last","length","trending","overall","sort","getSortingMethod"],"mappings":"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"}

package/components/ChartContainer/ChartContainer.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { Comp } from '@redsift/design-system';
+import { ChartContainerProps } from './types.js';
+
+declare const ChartContainer: Comp<ChartContainerProps, HTMLDivElement>;
+declare const ChartContainerTitle: Comp<Pick<ChartContainerProps, 'onReset'> & ComponentProps<'div'>, HTMLDivElement>;
+declare const ChartContainerDescription: Comp<ComponentProps<'div'>, HTMLDivElement>;
+
+export { ChartContainer, ChartContainerDescription, ChartContainerTitle };

package/components/ChartContainer/ChartContainer.js

@@ -0,0 +1,167 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState } from 'react';
+import classNames from 'classnames';
+import { useId, useTheme, warnIfNoAccessibleLabelFound, useMessageFormatter, ThemeProvider, Flexbox, Heading, Button } from '@redsift/design-system';
+import intlMessages from './intl/index.js';
+import { StyledChartContainer, StyledChartContainerTitle, StyledChartContainerCaption } from './styles.js';
+
+const _excluded = ["aria-label", "aria-labelledby", "description", "descriptionPosition", "chartProps", "chartRef", "children", "className", "id", "title", "onReset", "theme", "mode", "definition", "interactionExplanation", "descriptionForAssistiveTechnology", "dataTableRepresentation", "xAxisDefinition", "yAxisDefinition"],
+  _excluded2 = ["children", "className", "onReset", "id"],
+  _excluded3 = ["children", "className", "id"];
+const COMPONENT_NAME = 'ChartContainer';
+const CLASSNAME = 'redsift-chart-container';
+const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-label': propsAriaLabel,
+      'aria-labelledby': propsAriaLabelledby,
+      description,
+      descriptionPosition = 'belowChart',
+      chartProps,
+      chartRef,
+      children,
+      className,
+      id: propsId,
+      title,
+      onReset,
+      theme: propsTheme,
+      mode = 'static',
+      definition,
+      interactionExplanation,
+      descriptionForAssistiveTechnology,
+      dataTableRepresentation,
+      xAxisDefinition,
+      yAxisDefinition
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const theme = useTheme(propsTheme);
+  const [viewAsDataTable, setViewAsDataTable] = useState(false);
+  warnIfNoAccessibleLabelFound(props, [title]);
+  const format = useMessageFormatter(intlMessages);
+  const ariaLabel = propsAriaLabel ? propsAriaLabel : propsAriaLabelledby || title ? undefined : undefined;
+  const ariaLabelledby = propsAriaLabelledby ? propsAriaLabelledby : title ? `id${id}__title` : undefined;
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement("figure", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(StyledChartContainer, _extends({
+    $theme: theme,
+    role: "region",
+    "aria-hidden": "false"
+  }, ariaLabel ? {
+    'aria-label': `${ariaLabel}. ${format(mode)}.`
+  } : {}, ariaLabelledby ? {
+    'aria-labelledby': `${ariaLabelledby} id${id}__interactive-or-not`
+  } : {}, forwardedProps, {
+    ref: ref,
+    className: classNames(ChartContainer.className, className),
+    id: id
+  }), /*#__PURE__*/React__default.createElement("div", {
+    id: `id${id}__screen-reader-region-before`,
+    "aria-hidden": "false",
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    "aria-hidden": "false",
+    style: {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      marginTop: '-3px',
+      opacity: '0.01'
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    id: `id${id}__interactive-or-not`,
+    "aria-hidden": "true",
+    style: {
+      display: 'none'
+    }
+  }, format(`${mode}-chart`)), ariaLabel ? /*#__PURE__*/React__default.createElement("p", null, `${ariaLabel}. ${format(`${mode}-chart`)}`) : /*#__PURE__*/React__default.createElement("p", {
+    "aria-labelledby": `${ariaLabelledby} id${id}__interactive-or-not`
+  }), /*#__PURE__*/React__default.createElement("div", null, descriptionForAssistiveTechnology !== null && descriptionForAssistiveTechnology !== void 0 ? descriptionForAssistiveTechnology : description), /*#__PURE__*/React__default.createElement("div", null, interactionExplanation), /*#__PURE__*/React__default.createElement("div", null, definition), dataTableRepresentation ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
+    tabIndex: -1,
+    "aria-expanded": viewAsDataTable,
+    onClick: () => setViewAsDataTable(!viewAsDataTable)
+  }, format('view-as-data-table'), ', ', ariaLabel ? /*#__PURE__*/React__default.createElement("span", null, ariaLabel) : /*#__PURE__*/React__default.createElement("span", {
+    "aria-labelledby": ariaLabelledby
+  }))) : null, /*#__PURE__*/React__default.createElement("div", null, xAxisDefinition), /*#__PURE__*/React__default.createElement("div", null, yAxisDefinition))), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column"
+  }, title || onReset ? /*#__PURE__*/React__default.createElement(ChartContainerTitle, {
+    onReset: onReset,
+    id: id
+  }, title) : null, descriptionPosition === 'belowTitle' ? /*#__PURE__*/React__default.createElement(ChartContainerDescription, {
+    id: id
+  }, description) : null), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column"
+  }, children ? /*#__PURE__*/React__default.createElement("div", _extends({
+    "aria-hidden": "false",
+    dir: "ltr"
+  }, chartProps, {
+    ref: chartRef,
+    className: `${ChartContainer.className}__content`
+  }), children) : null, descriptionPosition === 'belowChart' ? /*#__PURE__*/React__default.createElement(ChartContainerDescription, {
+    id: id
+  }, description) : null, viewAsDataTable && dataTableRepresentation ? /*#__PURE__*/React__default.createElement("table", {
+    tabIndex: -1,
+    summary: format('table-summary')
+  }, ariaLabel ? /*#__PURE__*/React__default.createElement("caption", null, ariaLabel) : /*#__PURE__*/React__default.createElement("caption", {
+    "aria-labelledby": ariaLabelledby
+  }), dataTableRepresentation.header, dataTableRepresentation.body) : null)))));
+});
+ChartContainer.className = CLASSNAME;
+ChartContainer.displayName = COMPONENT_NAME;
+const ChartContainerTitle = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      onReset,
+      id
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded2);
+  const theme = useTheme();
+  const format = useMessageFormatter(intlMessages);
+  return /*#__PURE__*/React__default.createElement(StyledChartContainerTitle, _extends({
+    "aria-hidden": "true",
+    $theme: theme,
+    alignItems: "center",
+    justifyContent: "space-between",
+    className: classNames(`${ChartContainer.className}__title`, className),
+    id: `id${id}__title`
+  }, forwardedProps, {
+    ref: ref
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement(Heading, {
+    as: "h3"
+  }, children) : children ? children : null, onReset ? /*#__PURE__*/React__default.createElement(Button, {
+    className: `${ChartContainer.className}-title__reset-button`,
+    color: "grey",
+    variant: "unstyled",
+    onClick: onReset
+  }, format('reset')) : null);
+});
+ChartContainerTitle.displayName = 'ChartContainerTitle';
+const ChartContainerDescription = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      id
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded3);
+  const theme = useTheme();
+  return typeof children === 'string' ? /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, _extends({
+    "aria-hidden": "true",
+    $theme: theme,
+    className: classNames(`${ChartContainer.className}__description`, className),
+    id: `id${id}__description`
+  }, forwardedProps, {
+    ref: ref
+  }), children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+});
+ChartContainerDescription.displayName = 'ChartContainerDescription';
+
+export { ChartContainer, ChartContainerDescription, ChartContainerTitle };
+//# sourceMappingURL=ChartContainer.js.map

package/components/ChartContainer/ChartContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartContainer.js","sources":["../../../src/components/ChartContainer/ChartContainer.tsx"],"sourcesContent":["import React, { ComponentProps, forwardRef, RefObject, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '@redsift/design-system';\nimport intlMessages from './intl';\n\nimport {\n  Button,\n  Comp,\n  Flexbox,\n  Heading,\n  ThemeProvider,\n  useId,\n  useTheme,\n  warnIfNoAccessibleLabelFound,\n} from '@redsift/design-system';\n\nimport { ChartContainerProps } from './types';\nimport { StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle } from './styles';\n\nconst COMPONENT_NAME = 'ChartContainer';\nconst CLASSNAME = 'redsift-chart-container';\n\nexport const ChartContainer: Comp<ChartContainerProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    'aria-label': propsAriaLabel,\n    'aria-labelledby': propsAriaLabelledby,\n    description,\n    descriptionPosition = 'belowChart',\n    chartProps,\n    chartRef,\n    children,\n    className,\n    id: propsId,\n    title,\n    onReset,\n    theme: propsTheme,\n    mode = 'static',\n    definition,\n    interactionExplanation,\n    descriptionForAssistiveTechnology,\n    dataTableRepresentation,\n    xAxisDefinition,\n    yAxisDefinition,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n\n  const theme = useTheme(propsTheme);\n  const [viewAsDataTable, setViewAsDataTable] = useState(false);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<keyof JSX.IntrinsicElements>, [title]);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const ariaLabel = propsAriaLabel ? propsAriaLabel : propsAriaLabelledby || title ? undefined : undefined;\n  const ariaLabelledby = propsAriaLabelledby ? propsAriaLabelledby : title ? `id${id}__title` : undefined;\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <figure>\n        <div>\n          <StyledChartContainer\n            $theme={theme}\n            role=\"region\"\n            aria-hidden=\"false\"\n            {...(ariaLabel ? { 'aria-label': `${ariaLabel}. ${format(mode)}.` } : {})}\n            {...(ariaLabelledby ? { 'aria-labelledby': `${ariaLabelledby} id${id}__interactive-or-not` } : {})}\n            {...forwardedProps}\n            ref={ref as RefObject<HTMLDivElement>}\n            className={classNames(ChartContainer.className, className)}\n            id={id}\n          >\n            <div id={`id${id}__screen-reader-region-before`} aria-hidden=\"false\" style={{ position: 'relative' }}>\n              <div\n                aria-hidden=\"false\"\n                style={{\n                  position: 'absolute',\n                  width: '1px',\n                  height: '1px',\n                  overflow: 'hidden',\n                  whiteSpace: 'nowrap',\n                  clip: 'rect(1px, 1px, 1px, 1px)',\n                  marginTop: '-3px',\n                  opacity: '0.01',\n                }}\n              >\n                <p id={`id${id}__interactive-or-not`} aria-hidden=\"true\" style={{ display: 'none' }}>\n                  {format(`${mode}-chart`)}\n                </p>\n                {ariaLabel ? (\n                  <p>{`${ariaLabel}. ${format(`${mode}-chart`)}`}</p>\n                ) : (\n                  <p aria-labelledby={`${ariaLabelledby} id${id}__interactive-or-not`} />\n                )}\n                <div>{descriptionForAssistiveTechnology ?? description}</div>\n                <div>{interactionExplanation}</div>\n                <div>{definition}</div>\n                {dataTableRepresentation ? (\n                  <div>\n                    <button\n                      tabIndex={-1}\n                      aria-expanded={viewAsDataTable}\n                      onClick={() => setViewAsDataTable(!viewAsDataTable)}\n                    >\n                      {format('view-as-data-table')}\n                      {', '}\n                      {ariaLabel ? <span>{ariaLabel}</span> : <span aria-labelledby={ariaLabelledby} />}\n                    </button>\n                  </div>\n                ) : null}\n                <div>{xAxisDefinition}</div>\n                <div>{yAxisDefinition}</div>\n              </div>\n            </div>\n            <Flexbox flexDirection=\"column\">\n              {title || onReset ? (\n                <ChartContainerTitle onReset={onReset} id={id}>\n                  {title}\n                </ChartContainerTitle>\n              ) : null}\n              {descriptionPosition === 'belowTitle' ? (\n                <ChartContainerDescription id={id}>{description}</ChartContainerDescription>\n              ) : null}\n            </Flexbox>\n\n            <Flexbox flexDirection=\"column\">\n              {children ? (\n                <div\n                  aria-hidden=\"false\"\n                  dir=\"ltr\"\n                  {...chartProps}\n                  ref={chartRef}\n                  className={`${ChartContainer.className}__content`}\n                >\n                  {children}\n                </div>\n              ) : null}\n              {descriptionPosition === 'belowChart' ? (\n                <ChartContainerDescription id={id}>{description}</ChartContainerDescription>\n              ) : null}\n              {viewAsDataTable && dataTableRepresentation ? (\n                <table tabIndex={-1} summary={format('table-summary')}>\n                  {ariaLabel ? <caption>{ariaLabel}</caption> : <caption aria-labelledby={ariaLabelledby} />}\n                  {dataTableRepresentation.header}\n                  {dataTableRepresentation.body}\n                </table>\n              ) : null}\n            </Flexbox>\n          </StyledChartContainer>\n        </div>\n      </figure>\n    </ThemeProvider>\n  );\n});\nChartContainer.className = CLASSNAME;\nChartContainer.displayName = COMPONENT_NAME;\n\nexport const ChartContainerTitle: Comp<Pick<ChartContainerProps, 'onReset'> & ComponentProps<'div'>, HTMLDivElement> =\n  forwardRef((props, ref) => {\n    const { children, className, onReset, id, ...forwardedProps } = props;\n    const theme = useTheme();\n    const format = useMessageFormatter(intlMessages);\n\n    return (\n      <StyledChartContainerTitle\n        aria-hidden=\"true\"\n        $theme={theme}\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        className={classNames(`${ChartContainer.className}__title`, className)}\n        id={`id${id}__title`}\n        {...forwardedProps}\n        ref={ref}\n      >\n        {typeof children === 'string' ? <Heading as=\"h3\">{children}</Heading> : children ? children : null}\n\n        {onReset ? (\n          <Button\n            className={`${ChartContainer.className}-title__reset-button`}\n            color=\"grey\"\n            variant=\"unstyled\"\n            onClick={onReset}\n          >\n            {format('reset')}\n          </Button>\n        ) : null}\n      </StyledChartContainerTitle>\n    );\n  });\nChartContainerTitle.displayName = 'ChartContainerTitle';\n\nexport const ChartContainerDescription: Comp<ComponentProps<'div'>, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, id, ...forwardedProps } = props;\n  const theme = useTheme();\n\n  return typeof children === 'string' ? (\n    <StyledChartContainerCaption\n      aria-hidden=\"true\"\n      $theme={theme}\n      className={classNames(`${ChartContainer.className}__description`, className)}\n      id={`id${id}__description`}\n      {...forwardedProps}\n      ref={ref}\n    >\n      {children}\n    </StyledChartContainerCaption>\n  ) : (\n    <>{children}</>\n  );\n});\nChartContainerDescription.displayName = 'ChartContainerDescription';\n"],"names":["COMPONENT_NAME","CLASSNAME","ChartContainer","forwardRef","props","ref","propsAriaLabel","propsAriaLabelledby","description","descriptionPosition","chartProps","chartRef","children","className","id","propsId","title","onReset","theme","propsTheme","mode","definition","interactionExplanation","descriptionForAssistiveTechnology","dataTableRepresentation","xAxisDefinition","yAxisDefinition","forwardedProps","_objectWithoutProperties","_excluded","_id","useId","useTheme","viewAsDataTable","setViewAsDataTable","useState","warnIfNoAccessibleLabelFound","format","useMessageFormatter","intlMessages","ariaLabel","undefined","ariaLabelledby","React","createElement","ThemeProvider","value","StyledChartContainer","_extends","$theme","role","classNames","style","position","width","height","overflow","whiteSpace","clip","marginTop","opacity","display","tabIndex","onClick","Flexbox","flexDirection","ChartContainerTitle","ChartContainerDescription","dir","summary","header","body","displayName","_excluded2","StyledChartContainerTitle","alignItems","justifyContent","Heading","as","Button","color","variant","_excluded3","StyledChartContainerCaption","Fragment"],"mappings":"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"}

package/components/ChartContainer/context.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const ChartTypeContext = /*#__PURE__*/React__default.createContext(undefined);
+
+export { ChartTypeContext };
+//# sourceMappingURL=context.js.map

package/components/ChartContainer/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/ChartContainer/context.ts"],"sourcesContent":["import React from 'react';\nimport { useBarChartContext } from '../BarChart/context';\n\nexport type ChartType = 'bar' | 'line' | 'area';\n\nexport const ChartTypeContext = React.createContext<ChartType | undefined>(undefined);\n\nexport const useChartType = (): ChartType | undefined => {\n  return React.useContext(ChartTypeContext);\n};\n\nexport const useResolvedChartContext = () => {\n  const chartType = useChartType();\n\n  switch (chartType) {\n    case 'bar':\n      return useBarChartContext();\n    default:\n      return undefined;\n  }\n};\n\nexport function useResolvedProp<T>(prop: T | undefined, contextValue: T | undefined, defaultValue?: T): T | undefined {\n  if (prop !== undefined) return prop;\n  if (contextValue !== undefined) return contextValue;\n  return defaultValue;\n}\n"],"names":["ChartTypeContext","React","createContext","undefined"],"mappings":";;AAKO,MAAMA,gBAAgB,gBAAGC,cAAK,CAACC,aAAa,CAAwBC,SAAS;;;;"}

package/components/ChartContainer/intl/en-US.json.js

@@ -0,0 +1,14 @@
+var interactive = "Interactive";
+var reset = "Reset";
+var enUS = {
+	interactive: interactive,
+	"static": "Static",
+	"static-chart": "Static chart.",
+	"interactive-chart": "Interactive chart.",
+	"view-as-data-table": "View as data table",
+	"table-summary": "Table representation of chart.",
+	reset: reset
+};
+
+export { enUS as default, interactive, reset };
+//# sourceMappingURL=en-US.json.js.map

package/components/ChartContainer/intl/en-US.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/components/ChartContainer/intl/fr-FR.json.js

@@ -0,0 +1,14 @@
+var interactive = "Interactif";
+var reset = "Réinitialiser";
+var frFR = {
+	interactive: interactive,
+	"static": "Statique",
+	"static-chart": "Graphique statique.",
+	"interactive-chart": "Graphique intéractif.",
+	"view-as-data-table": "Voir au format table de données",
+	"table-summary": "Représentation du graphique sous forme de table de données.",
+	reset: reset
+};
+
+export { frFR as default, interactive, reset };
+//# sourceMappingURL=fr-FR.json.js.map

package/components/ChartContainer/intl/fr-FR.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr-FR.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/components/ChartContainer/intl/index.js

@@ -0,0 +1,10 @@
+import enUS from './en-US.json.js';
+import frFR from './fr-FR.json.js';
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/components/ChartContainer/intl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ChartContainer/intl/index.ts"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n"],"names":["enUS","frFR"],"mappings":";;;AAGA,mBAAe;AACb,EAAA,OAAO,EAAEA,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;;;"}

package/components/ChartContainer/styles.d.ts

@@ -0,0 +1,17 @@
+import * as _redsift_design_system from '@redsift/design-system';
+import { Theme } from '@redsift/design-system';
+import * as styled_components from 'styled-components';
+import { ChartContainerProps, StyledChartContainerProps } from './types.js';
+
+/**
+ * Component style.
+ */
+declare const StyledChartContainer: styled_components.StyledComponent<"div", any, Omit<ChartContainerProps, "theme"> & {
+    $theme: Theme;
+}, never>;
+declare const StyledChartContainerTitle: styled_components.StyledComponent<_redsift_design_system.Comp<_redsift_design_system.FlexboxProps, HTMLDivElement>, any, Omit<ChartContainerProps, "theme"> & {
+    $theme: Theme;
+}, never>;
+declare const StyledChartContainerCaption: styled_components.StyledComponent<"p", any, Omit<StyledChartContainerProps, "onReset">, never>;
+
+export { StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle };