@redsift/charts 9.2.3-patch → 9.2.3

package/src/scheme.ts

@@ -0,0 +1,213 @@
+import { scaleOrdinal as d3scaleOrdinal, ScaleOrdinal as d3ScaleOrdinal } from 'd3';
+import { ChartTheme } from './types';
+
+import {
+  RedsiftColorPresentationAquaDark,
+  RedsiftColorPresentationAquaDarker,
+  RedsiftColorPresentationAquaDarkerer,
+  RedsiftColorPresentationAquaDefault,
+  RedsiftColorPresentationAquaLight,
+  RedsiftColorPresentationAquaLighter,
+  RedsiftColorPresentationAquaLighterer,
+  RedsiftColorPresentationBlueDark,
+  RedsiftColorPresentationBlueDarker,
+  RedsiftColorPresentationBlueDarkerer,
+  RedsiftColorPresentationBlueDefault,
+  RedsiftColorPresentationBlueLight,
+  RedsiftColorPresentationBlueLighter,
+  RedsiftColorPresentationBlueLighterer,
+  RedsiftColorPresentationBrownDark,
+  RedsiftColorPresentationBrownDarker,
+  RedsiftColorPresentationBrownDarkerer,
+  RedsiftColorPresentationBrownDefault,
+  RedsiftColorPresentationBrownLight,
+  RedsiftColorPresentationBrownLighter,
+  RedsiftColorPresentationBrownLighterer,
+  RedsiftColorPresentationGreenDark,
+  RedsiftColorPresentationGreenDarker,
+  RedsiftColorPresentationGreenDarkerer,
+  RedsiftColorPresentationGreenDefault,
+  RedsiftColorPresentationGreenLight,
+  RedsiftColorPresentationGreenLighter,
+  RedsiftColorPresentationGreenLighterer,
+  RedsiftColorPresentationGreyDark,
+  RedsiftColorPresentationGreyDarker,
+  RedsiftColorPresentationGreyDarkerer,
+  RedsiftColorPresentationGreyDefault,
+  RedsiftColorPresentationGreyLight,
+  RedsiftColorPresentationGreyLighter,
+  RedsiftColorPresentationGreyLighterer,
+  RedsiftColorPresentationOrangeDark,
+  RedsiftColorPresentationOrangeDarker,
+  RedsiftColorPresentationOrangeDarkerer,
+  RedsiftColorPresentationOrangeDefault,
+  RedsiftColorPresentationOrangeLight,
+  RedsiftColorPresentationOrangeLighter,
+  RedsiftColorPresentationOrangeLighterer,
+  RedsiftColorPresentationPinkDark,
+  RedsiftColorPresentationPinkDarker,
+  RedsiftColorPresentationPinkDarkerer,
+  RedsiftColorPresentationPinkDefault,
+  RedsiftColorPresentationPinkLight,
+  RedsiftColorPresentationPinkLighter,
+  RedsiftColorPresentationPinkLighterer,
+  RedsiftColorPresentationPurpleDark,
+  RedsiftColorPresentationPurpleDarker,
+  RedsiftColorPresentationPurpleDarkerer,
+  RedsiftColorPresentationPurpleDefault,
+  RedsiftColorPresentationPurpleLight,
+  RedsiftColorPresentationPurpleLighter,
+  RedsiftColorPresentationPurpleLighterer,
+  RedsiftColorPresentationRedDark,
+  RedsiftColorPresentationRedDarker,
+  RedsiftColorPresentationRedDarkerer,
+  RedsiftColorPresentationRedDefault,
+  RedsiftColorPresentationRedLight,
+  RedsiftColorPresentationRedLighter,
+  RedsiftColorPresentationRedLighterer,
+  RedsiftColorPresentationYellowDark,
+  RedsiftColorPresentationYellowDarker,
+  RedsiftColorPresentationYellowDarkerer,
+  RedsiftColorPresentationYellowDefault,
+  RedsiftColorPresentationYellowLight,
+  RedsiftColorPresentationYellowLighter,
+  RedsiftColorPresentationYellowLighterer,
+} from '@redsift/design-system';
+
+export const monochrome = RedsiftColorPresentationBlueDefault;
+export const empty = RedsiftColorPresentationGreyDark;
+
+export const scheme = {
+  default: [
+    RedsiftColorPresentationGreenDefault,
+    RedsiftColorPresentationPinkDefault,
+    RedsiftColorPresentationAquaDefault,
+    RedsiftColorPresentationBrownDefault,
+    RedsiftColorPresentationRedDefault,
+    RedsiftColorPresentationYellowDefault,
+    RedsiftColorPresentationPurpleDefault,
+    RedsiftColorPresentationOrangeDefault,
+    RedsiftColorPresentationBlueDefault,
+    RedsiftColorPresentationGreyDefault,
+  ],
+  dark: [
+    RedsiftColorPresentationGreenDark,
+    RedsiftColorPresentationPinkDark,
+    RedsiftColorPresentationAquaDark,
+    RedsiftColorPresentationBrownDark,
+    RedsiftColorPresentationRedDark,
+    RedsiftColorPresentationYellowDark,
+    RedsiftColorPresentationPurpleDark,
+    RedsiftColorPresentationOrangeDark,
+    RedsiftColorPresentationBlueDark,
+    RedsiftColorPresentationGreyDark,
+  ],
+  darker: [
+    RedsiftColorPresentationGreenDarker,
+    RedsiftColorPresentationPinkDarker,
+    RedsiftColorPresentationAquaDarker,
+    RedsiftColorPresentationBrownDarker,
+    RedsiftColorPresentationRedDarker,
+    RedsiftColorPresentationYellowDarker,
+    RedsiftColorPresentationPurpleDarker,
+    RedsiftColorPresentationOrangeDarker,
+    RedsiftColorPresentationBlueDarker,
+    RedsiftColorPresentationGreyDarker,
+  ],
+  darkerer: [
+    RedsiftColorPresentationGreenDarkerer,
+    RedsiftColorPresentationPinkDarkerer,
+    RedsiftColorPresentationAquaDarkerer,
+    RedsiftColorPresentationBrownDarkerer,
+    RedsiftColorPresentationRedDarkerer,
+    RedsiftColorPresentationYellowDarkerer,
+    RedsiftColorPresentationPurpleDarkerer,
+    RedsiftColorPresentationOrangeDarkerer,
+    RedsiftColorPresentationBlueDarkerer,
+    RedsiftColorPresentationGreyDarkerer,
+  ],
+  light: [
+    RedsiftColorPresentationGreenLight,
+    RedsiftColorPresentationPinkLight,
+    RedsiftColorPresentationAquaLight,
+    RedsiftColorPresentationBrownLight,
+    RedsiftColorPresentationRedLight,
+    RedsiftColorPresentationYellowLight,
+    RedsiftColorPresentationPurpleLight,
+    RedsiftColorPresentationOrangeLight,
+    RedsiftColorPresentationBlueLight,
+    RedsiftColorPresentationGreyLight,
+  ],
+  lighter: [
+    RedsiftColorPresentationGreenLighter,
+    RedsiftColorPresentationPinkLighter,
+    RedsiftColorPresentationAquaLighter,
+    RedsiftColorPresentationBrownLighter,
+    RedsiftColorPresentationRedLighter,
+    RedsiftColorPresentationYellowLighter,
+    RedsiftColorPresentationPurpleLighter,
+    RedsiftColorPresentationOrangeLighter,
+    RedsiftColorPresentationBlueLighter,
+    RedsiftColorPresentationGreyLighter,
+  ],
+  lighterer: [
+    RedsiftColorPresentationGreenLighterer,
+    RedsiftColorPresentationPinkLighterer,
+    RedsiftColorPresentationAquaLighterer,
+    RedsiftColorPresentationBrownLighterer,
+    RedsiftColorPresentationRedLighterer,
+    RedsiftColorPresentationYellowLighterer,
+    RedsiftColorPresentationPurpleLighterer,
+    RedsiftColorPresentationOrangeLighterer,
+    RedsiftColorPresentationBlueLighterer,
+    RedsiftColorPresentationGreyLighterer,
+  ],
+  monochrome: [monochrome],
+  empty: [empty],
+};
+
+export const successDangerScheme = {
+  success: RedsiftColorPresentationGreenDefault,
+  warning: RedsiftColorPresentationOrangeDefault,
+  danger: RedsiftColorPresentationRedDefault,
+  neutral: RedsiftColorPresentationGreyDefault,
+};
+
+export const getColorScale = (
+  theme: ChartTheme,
+  domain?: string[],
+  isEmpty?: boolean
+): d3ScaleOrdinal<string, string> => {
+  let d3colors = d3scaleOrdinal(scheme.default);
+  if (isEmpty) {
+    d3colors = d3scaleOrdinal(scheme.empty);
+  } else if (typeof theme === 'string') {
+    d3colors = d3scaleOrdinal().domain(domain!).range(scheme[theme]).unknown(monochrome) as d3ScaleOrdinal<
+      string,
+      string
+    >;
+  } else if (typeof theme === 'object') {
+    if (
+      Object.keys(theme).includes('success') &&
+      Object.keys(theme).includes('danger') &&
+      Object.keys(theme).includes('warning')
+    ) {
+      d3colors = d3scaleOrdinal()
+        .domain([theme.success, theme.warning, theme.danger, ...(theme.neutral ? [theme.neutral] : [])])
+        .range([
+          successDangerScheme.success,
+          successDangerScheme.warning,
+          successDangerScheme.danger,
+          ...(theme.neutral ? [successDangerScheme.neutral] : []),
+        ])
+        .unknown(monochrome) as d3ScaleOrdinal<string, string>;
+    } else {
+      d3colors = d3scaleOrdinal()
+        .domain(Object.keys(theme))
+        .range(Object.values(theme))
+        .unknown(monochrome) as d3ScaleOrdinal<string, string>;
+    }
+  }
+
+  return d3colors;
+};

package/src/types/data.ts

@@ -0,0 +1,52 @@
+import { PieArcDatum as d3PieArcDatum } from 'd3-shape';
+
+export type JSONValue =
+  | string
+  | number
+  | boolean
+  | { [x: string]: JSONValue }
+  | Array<JSONValue>
+  | undefined
+  | null;
+
+export type JSONObject = { [x: string]: JSONValue };
+
+export type JSONArray = Array<JSONObject>;
+
+export type Datum<T> = {
+  key: T;
+  value: number;
+  percent?: number;
+};
+
+export type CategoryDim = string;
+export type CoordinatesCategoryDim = [
+  number,
+  number,
+  string | undefined | null
+];
+
+export type CategoryDatum = Datum<CategoryDim>;
+export type CoordinatesCategoryDatum = Datum<CoordinatesCategoryDim>;
+
+export type CategoryData = CategoryDatum[];
+export type CoordinatesCategoryData = CoordinatesCategoryDatum[];
+
+export type ArcDatum = d3PieArcDatum<CategoryDatum>;
+
+export type BarDatum = {
+  data: CategoryDatum;
+  height?: number;
+  width?: number;
+};
+
+export type DotDatum = {
+  data: CoordinatesCategoryDatum;
+  x: number;
+  y: number;
+  r: number;
+};
+
+export type LegendItemDatum = {
+  data: CategoryDatum;
+};

package/src/types/index.ts

@@ -0,0 +1,5 @@
+export * from './data';
+export * from './legend';
+export * from './scale';
+export * from './size';
+export * from './theme';

package/src/types/legend.ts

@@ -0,0 +1,19 @@
+import { ValueOf } from '@redsift/design-system';
+
+/** TOOLTIP */
+
+export const TooltipVariant = {
+  none: 'none',
+  label: 'label',
+  value: 'value',
+  percent: 'percent',
+};
+export type TooltipVariant = ValueOf<typeof TooltipVariant>;
+
+/** LEGEND */
+export const LabelVariant = {
+  label: 'label',
+  value: 'value',
+  percent: 'percent',
+} as const;
+export type LabelVariant = ValueOf<typeof LabelVariant>;

package/src/types/scale.ts

@@ -0,0 +1,79 @@
+import {
+  ScaleLinear as d3ScaleLinear,
+  ScalePoint as d3ScalePoint,
+  ScaleBand as d3ScaleBand,
+  ScaleLogarithmic as d3ScaleLogarithmic,
+  ScaleSymLog as d3ScaleSymLog,
+  ScaleTime as d3ScaleTime,
+} from 'd3-scale';
+
+export type Coordinates = {
+  x: number;
+  y: number;
+};
+
+export type NumericValue = { valueOf(): number };
+
+export type StringValue = { toString(): string };
+
+export type ScaleValue = NumericValue | StringValue | Date;
+
+export interface ScaleLinear<Output>
+  extends d3ScaleLinear<number, Output, never> {
+  type: 'linear';
+  // default to `false`
+  stacked: boolean;
+}
+
+export interface ScaleLog extends d3ScaleLogarithmic<number, number> {
+  type: 'log';
+}
+
+export interface ScaleSymlog extends d3ScaleSymLog<number, number> {
+  type: 'symlog';
+}
+
+export interface ScalePoint<Input extends StringValue>
+  extends d3ScalePoint<Input> {
+  type: 'point';
+}
+
+export interface ScaleBand<Input extends StringValue>
+  extends d3ScaleBand<Input> {
+  type: 'band';
+}
+
+export interface ScaleTime<Input> extends d3ScaleTime<Input, number> {
+  type: 'time';
+  useUTC: boolean;
+}
+
+export interface ScaleTypeToScale<Input, Output> {
+  linear: Input extends NumericValue ? ScaleLinear<Output> : never;
+  log: Input extends NumericValue ? ScaleLog : never;
+  symlog: Input extends NumericValue ? ScaleSymlog : never;
+  point: Input extends StringValue ? ScalePoint<Input> : never;
+  band: Input extends StringValue ? ScaleBand<Input> : never;
+  time: Input extends StringValue | Date ? ScaleTime<Input> : never;
+}
+
+export type Scale<Input, Output> = ScaleTypeToScale<
+  Input,
+  Output
+>[keyof ScaleTypeToScale<Input, Output>];
+
+export type AnyScale = Scale<any, any>;
+
+export type ScaleWithBandwidth = ScaleBand<any> | ScalePoint<any>;
+
+export type TicksSpec =
+  // exact number of ticks, please note that
+  // depending on the current range of values,
+  // you might not get this exact count
+  | number
+  // string is used for Date based scales,
+  // it can express a time interval,
+  // for example: every 2 weeks
+  | string
+  // override scale ticks with custom explicit values
+  | ScaleValue[];

package/src/types/size.ts

@@ -0,0 +1,17 @@
+import { ValueOf } from '@redsift/design-system';
+
+export type ChartDimensions = {
+  width: number;
+  height: number;
+  marginTop?: number;
+  marginRight?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+};
+
+export const ChartSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+} as const;
+export type ChartSize = ValueOf<typeof ChartSize>;

package/src/types/theme.ts

@@ -0,0 +1,27 @@
+import { ValueOf } from '@redsift/design-system';
+
+export const ColorTheme = {
+  default: 'default',
+  dark: 'dark',
+  darker: 'darker',
+  darkerer: 'darkerer',
+  light: 'light',
+  lighter: 'lighter',
+  lighterer: 'lighterer',
+  monochrome: 'monochrome',
+} as const;
+export type ColorTheme = ValueOf<typeof ColorTheme>;
+
+export type SuccessDangerColorTheme = {
+  success: string;
+  warning: string;
+  danger: string;
+  neutral?: string;
+};
+
+export type CustomColorTheme = Record<string, string>;
+
+export type ChartTheme =
+  | ColorTheme
+  | SuccessDangerColorTheme
+  | CustomColorTheme;

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig"
+}