@redsift/charts 8.0.0 → 8.0.1

package/src/scheme.ts

@@ -0,0 +1,221 @@
+import {
+  scaleOrdinal as d3scaleOrdinal,
+  ScaleOrdinal as d3ScaleOrdinal,
+} from 'd3';
+import { ChartTheme } from './types';
+
+import {
+  RedsiftDataVizColorAquaDark,
+  RedsiftDataVizColorAquaDarker,
+  RedsiftDataVizColorAquaDarkerer,
+  RedsiftDataVizColorAquaDefault,
+  RedsiftDataVizColorAquaLight,
+  RedsiftDataVizColorAquaLighter,
+  RedsiftDataVizColorAquaLighterer,
+  RedsiftDataVizColorBlueDark,
+  RedsiftDataVizColorBlueDarker,
+  RedsiftDataVizColorBlueDarkerer,
+  RedsiftDataVizColorBlueDefault,
+  RedsiftDataVizColorBlueLight,
+  RedsiftDataVizColorBlueLighter,
+  RedsiftDataVizColorBlueLighterer,
+  RedsiftDataVizColorBrownDark,
+  RedsiftDataVizColorBrownDarker,
+  RedsiftDataVizColorBrownDarkerer,
+  RedsiftDataVizColorBrownDefault,
+  RedsiftDataVizColorBrownLight,
+  RedsiftDataVizColorBrownLighter,
+  RedsiftDataVizColorBrownLighterer,
+  RedsiftDataVizColorGreenDark,
+  RedsiftDataVizColorGreenDarker,
+  RedsiftDataVizColorGreenDarkerer,
+  RedsiftDataVizColorGreenDefault,
+  RedsiftDataVizColorGreenLight,
+  RedsiftDataVizColorGreenLighter,
+  RedsiftDataVizColorGreenLighterer,
+  RedsiftDataVizColorGreyDark,
+  RedsiftDataVizColorGreyDarker,
+  RedsiftDataVizColorGreyDarkerer,
+  RedsiftDataVizColorGreyDefault,
+  RedsiftDataVizColorGreyLight,
+  RedsiftDataVizColorGreyLighter,
+  RedsiftDataVizColorGreyLighterer,
+  RedsiftDataVizColorOrangeDark,
+  RedsiftDataVizColorOrangeDarker,
+  RedsiftDataVizColorOrangeDarkerer,
+  RedsiftDataVizColorOrangeDefault,
+  RedsiftDataVizColorOrangeLight,
+  RedsiftDataVizColorOrangeLighter,
+  RedsiftDataVizColorOrangeLighterer,
+  RedsiftDataVizColorPinkDark,
+  RedsiftDataVizColorPinkDarker,
+  RedsiftDataVizColorPinkDarkerer,
+  RedsiftDataVizColorPinkDefault,
+  RedsiftDataVizColorPinkLight,
+  RedsiftDataVizColorPinkLighter,
+  RedsiftDataVizColorPinkLighterer,
+  RedsiftDataVizColorPurpleDark,
+  RedsiftDataVizColorPurpleDarker,
+  RedsiftDataVizColorPurpleDarkerer,
+  RedsiftDataVizColorPurpleDefault,
+  RedsiftDataVizColorPurpleLight,
+  RedsiftDataVizColorPurpleLighter,
+  RedsiftDataVizColorPurpleLighterer,
+  RedsiftDataVizColorRedDark,
+  RedsiftDataVizColorRedDarker,
+  RedsiftDataVizColorRedDarkerer,
+  RedsiftDataVizColorRedDefault,
+  RedsiftDataVizColorRedLight,
+  RedsiftDataVizColorRedLighter,
+  RedsiftDataVizColorRedLighterer,
+  RedsiftDataVizColorYellowDark,
+  RedsiftDataVizColorYellowDarker,
+  RedsiftDataVizColorYellowDarkerer,
+  RedsiftDataVizColorYellowDefault,
+  RedsiftDataVizColorYellowLight,
+  RedsiftDataVizColorYellowLighter,
+  RedsiftDataVizColorYellowLighterer,
+} from '@redsift/design-system';
+
+export const monochrome = RedsiftDataVizColorBlueDefault;
+export const empty = RedsiftDataVizColorGreyDark;
+
+export const scheme = {
+  default: [
+    RedsiftDataVizColorGreenDefault,
+    RedsiftDataVizColorPinkDefault,
+    RedsiftDataVizColorAquaDefault,
+    RedsiftDataVizColorBrownDefault,
+    RedsiftDataVizColorRedDefault,
+    RedsiftDataVizColorYellowDefault,
+    RedsiftDataVizColorPurpleDefault,
+    RedsiftDataVizColorOrangeDefault,
+    RedsiftDataVizColorBlueDefault,
+    RedsiftDataVizColorGreyDefault,
+  ],
+  dark: [
+    RedsiftDataVizColorGreenDark,
+    RedsiftDataVizColorPinkDark,
+    RedsiftDataVizColorAquaDark,
+    RedsiftDataVizColorBrownDark,
+    RedsiftDataVizColorRedDark,
+    RedsiftDataVizColorYellowDark,
+    RedsiftDataVizColorPurpleDark,
+    RedsiftDataVizColorOrangeDark,
+    RedsiftDataVizColorBlueDark,
+    RedsiftDataVizColorGreyDark,
+  ],
+  darker: [
+    RedsiftDataVizColorGreenDarker,
+    RedsiftDataVizColorPinkDarker,
+    RedsiftDataVizColorAquaDarker,
+    RedsiftDataVizColorBrownDarker,
+    RedsiftDataVizColorRedDarker,
+    RedsiftDataVizColorYellowDarker,
+    RedsiftDataVizColorPurpleDarker,
+    RedsiftDataVizColorOrangeDarker,
+    RedsiftDataVizColorBlueDarker,
+    RedsiftDataVizColorGreyDarker,
+  ],
+  darkerer: [
+    RedsiftDataVizColorGreenDarkerer,
+    RedsiftDataVizColorPinkDarkerer,
+    RedsiftDataVizColorAquaDarkerer,
+    RedsiftDataVizColorBrownDarkerer,
+    RedsiftDataVizColorRedDarkerer,
+    RedsiftDataVizColorYellowDarkerer,
+    RedsiftDataVizColorPurpleDarkerer,
+    RedsiftDataVizColorOrangeDarkerer,
+    RedsiftDataVizColorBlueDarkerer,
+    RedsiftDataVizColorGreyDarkerer,
+  ],
+  light: [
+    RedsiftDataVizColorGreenLight,
+    RedsiftDataVizColorPinkLight,
+    RedsiftDataVizColorAquaLight,
+    RedsiftDataVizColorBrownLight,
+    RedsiftDataVizColorRedLight,
+    RedsiftDataVizColorYellowLight,
+    RedsiftDataVizColorPurpleLight,
+    RedsiftDataVizColorOrangeLight,
+    RedsiftDataVizColorBlueLight,
+    RedsiftDataVizColorGreyLight,
+  ],
+  lighter: [
+    RedsiftDataVizColorGreenLighter,
+    RedsiftDataVizColorPinkLighter,
+    RedsiftDataVizColorAquaLighter,
+    RedsiftDataVizColorBrownLighter,
+    RedsiftDataVizColorRedLighter,
+    RedsiftDataVizColorYellowLighter,
+    RedsiftDataVizColorPurpleLighter,
+    RedsiftDataVizColorOrangeLighter,
+    RedsiftDataVizColorBlueLighter,
+    RedsiftDataVizColorGreyLighter,
+  ],
+  lighterer: [
+    RedsiftDataVizColorGreenLighterer,
+    RedsiftDataVizColorPinkLighterer,
+    RedsiftDataVizColorAquaLighterer,
+    RedsiftDataVizColorBrownLighterer,
+    RedsiftDataVizColorRedLighterer,
+    RedsiftDataVizColorYellowLighterer,
+    RedsiftDataVizColorPurpleLighterer,
+    RedsiftDataVizColorOrangeLighterer,
+    RedsiftDataVizColorBlueLighterer,
+    RedsiftDataVizColorGreyLighterer,
+  ],
+  monochrome: [monochrome],
+  empty: [empty],
+};
+
+export const successDangerScheme = {
+  success: RedsiftDataVizColorGreenDefault,
+  warning: RedsiftDataVizColorOrangeDefault,
+  danger: RedsiftDataVizColorRedDefault,
+  neutral: RedsiftDataVizColorGreyDefault,
+};
+
+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"
+}