@redsift/dashboard 8.0.0 → 8.0.1

package/src/components/WithFilters/FilterableScatterPlot.tsx

@@ -0,0 +1,335 @@
+import { DotDatum, LegendItemDatum } from '@redsift/charts';
+import { Dimension, Group } from '../../types';
+import React, {
+  useEffect,
+  useContext,
+  useId,
+  useState,
+  isValidElement,
+} from 'react';
+import { CrossfilterRegistry } from '../CrossfilterRegistry';
+import { DashboardContext, DashboardReducerActionType } from '../Dashboard';
+import { ChartEmptyState } from '../ChartEmptyState';
+import { ScaleLinear as d3ScaleLinear } from 'd3';
+import { ChartsWithFiltersProps } from './types';
+
+type BrushFilter = {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+};
+
+const filter =
+  (legendFilters?: string[], brushFilters?: BrushFilter) =>
+  (d: [number, number, string]) => {
+    if (legendFilters && legendFilters.length && brushFilters) {
+      return (
+        d[0] >= brushFilters.minX &&
+        d[0] <= brushFilters.maxX &&
+        d[1] >= brushFilters.minY &&
+        d[1] <= brushFilters.maxY &&
+        legendFilters.includes(d[2])
+      );
+    } else if (legendFilters && legendFilters.length) {
+      return legendFilters.includes(d[2]);
+    } else if (brushFilters) {
+      return (
+        d[0] >= brushFilters.minX &&
+        d[0] <= brushFilters.maxX &&
+        d[1] >= brushFilters.minY &&
+        d[1] <= brushFilters.maxY
+      );
+    } else {
+      return true;
+    }
+  };
+
+const isFiltered =
+  (legendFilters?: string[], brushFilters?: BrushFilter) =>
+  (datum: DotDatum) => {
+    if (legendFilters && legendFilters.length && brushFilters) {
+      return (
+        datum.data.key[0] >= brushFilters.minX &&
+        datum.data.key[0] <= brushFilters.maxX &&
+        datum.data.key[1] >= brushFilters.minY &&
+        datum.data.key[1] <= brushFilters.maxY &&
+        legendFilters.includes(datum.data.key[2] as string)
+      );
+    } else if (legendFilters && legendFilters.length) {
+      return legendFilters.includes(datum.data.key[2] as string);
+    } else if (brushFilters) {
+      return (
+        datum.data.key[0] >= brushFilters.minX &&
+        datum.data.key[0] <= brushFilters.maxX &&
+        datum.data.key[1] >= brushFilters.minY &&
+        datum.data.key[1] <= brushFilters.maxY
+      );
+    } else {
+      return true;
+    }
+  };
+
+export const FilterableScatterPlot: React.FC<ChartsWithFiltersProps> = (
+  props
+) => {
+  const {
+    children,
+    datagridCoordinatesCategoryDimFilter,
+    dimension,
+    group,
+    id: propsId,
+    isDimensionArray,
+    isResetable,
+    localeText,
+    onFilter,
+  } = props;
+  const id = propsId ?? useId();
+
+  const { emptyChartTitle, emptyChartSubtitle, emptyChartResetLabel } = {
+    ...localeText,
+  };
+
+  const {
+    data,
+    dispatch,
+    toggleUpdateContext,
+    // state: { tableFilters },
+  } = useContext(DashboardContext);
+
+  const [ndxDimension, setNdxDimension] = useState<Dimension>();
+  const [ndxGroup, setNdxGroup] = useState<Group>();
+
+  useEffect(() => {
+    const computedNdxDimension = CrossfilterRegistry.get(data).dimension(
+      dimension,
+      isDimensionArray
+    );
+    const computedNdxGroup = group
+      ? group(computedNdxDimension)
+      : computedNdxDimension.group();
+    setNdxDimension(computedNdxDimension);
+    setNdxGroup(computedNdxGroup);
+    return function cleanup() {
+      computedNdxDimension.filterAll();
+    };
+  }, [dimension, data, group]);
+
+  const [brushFilters, setBrushFilters] = useState<BrushFilter>();
+  const [legendFilters, setLegendFilters] = useState<string[]>([]);
+
+  const handleBrushFilter = (newFilters: BrushFilter) => {
+    setBrushFilters(newFilters);
+    ndxDimension!.filter((d) =>
+      filter(
+        legendFilters,
+        newFilters
+      )(d as unknown as [number, number, string])
+    );
+    toggleUpdateContext?.();
+
+    if (datagridCoordinatesCategoryDimFilter) {
+      dispatch?.({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: `${id}-x`,
+          columnField: datagridCoordinatesCategoryDimFilter[0].field,
+          operatorValue: datagridCoordinatesCategoryDimFilter[0].operator,
+          value: [newFilters.minX, newFilters.maxX],
+        },
+      });
+      dispatch?.({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: `${id}-y`,
+          columnField: datagridCoordinatesCategoryDimFilter[1].field,
+          operatorValue: datagridCoordinatesCategoryDimFilter[1].operator,
+          value: [newFilters.minY, newFilters.maxY],
+        },
+      });
+    }
+
+    if (onFilter) {
+      onFilter(newFilters);
+    }
+  };
+
+  const handleLegendFilter = (category: string) => {
+    let newFilters: string[];
+    if (legendFilters.includes(category)) {
+      newFilters = legendFilters.filter((f) => f !== category);
+    } else {
+      newFilters = [...legendFilters, category];
+    }
+
+    setLegendFilters(newFilters);
+    ndxDimension!.filter((d) =>
+      filter(newFilters, brushFilters)(d as unknown as [number, number, string])
+    );
+    toggleUpdateContext?.();
+
+    if (datagridCoordinatesCategoryDimFilter?.length === 3) {
+      dispatch?.({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: `${id}-category`,
+          columnField: datagridCoordinatesCategoryDimFilter[2].field,
+          operatorValue: datagridCoordinatesCategoryDimFilter[2].operator,
+          value: newFilters,
+        },
+      });
+    }
+
+    if (onFilter) {
+      onFilter(newFilters);
+    }
+  };
+
+  const resetFilters = (brush = true, legend = true) => {
+    if (brush) {
+      setBrushFilters(undefined);
+    }
+    if (legend) {
+      setLegendFilters([]);
+    }
+    ndxDimension!.filter((d) =>
+      filter(
+        legend ? [] : legendFilters,
+        brush ? undefined : brushFilters
+      )(d as unknown as [number, number, string])
+    );
+    toggleUpdateContext?.();
+
+    if (datagridCoordinatesCategoryDimFilter) {
+      if (brush) {
+        dispatch?.({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `${id}-x`,
+            columnField: datagridCoordinatesCategoryDimFilter[0].field,
+            operatorValue: datagridCoordinatesCategoryDimFilter[0].operator,
+          },
+        });
+        dispatch?.({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `${id}-y`,
+            columnField: datagridCoordinatesCategoryDimFilter[1].field,
+            operatorValue: datagridCoordinatesCategoryDimFilter[1].operator,
+          },
+        });
+      }
+      if (legend && datagridCoordinatesCategoryDimFilter.length === 3) {
+        dispatch?.({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `${id}-category`,
+            columnField: datagridCoordinatesCategoryDimFilter[2].field,
+            operatorValue: datagridCoordinatesCategoryDimFilter[2].operator,
+          },
+        });
+      }
+    }
+
+    if (onFilter) {
+      onFilter();
+    }
+  };
+
+  // useEffect(() => {
+  //   if (!datagridCoordinatesCategoryDimFilter) {
+  //     return;
+  //   }
+
+  //   const updatedXFilters = tableFilters.find(
+  //     (filter) =>
+  //       filter.columnField === datagridCoordinatesCategoryDimFilter[0].field &&
+  //       filter.operatorValue ===
+  //         datagridCoordinatesCategoryDimFilter[0].operator
+  //   )?.value;
+  //   const updatedYFilters = tableFilters.find(
+  //     (filter) =>
+  //       filter.columnField === datagridCoordinatesCategoryDimFilter[1].field &&
+  //       filter.operatorValue ===
+  //         datagridCoordinatesCategoryDimFilter[1].operator
+  //   )?.value;
+  //   console.log(updatedXFilters, updatedYFilters, brushFilters);
+  //   const updatedFilters = {
+  //     minX: Number(updatedXFilters[0]),
+  //     maxX: Number(updatedXFilters[0]),
+  //     minY: Number(updatedYFilters[1]),
+  //     maxY: Number(updatedYFilters[1]),
+  //   }
+  //   if (updatedFilters && JSON.stringify(updatedFilters) !== JSON.stringify(brushFilters)) {
+  //   }
+  // }, [tableFilters]);
+
+  const emptyComponent = (
+    <ChartEmptyState
+      title={emptyChartTitle!}
+      subtitle={emptyChartSubtitle}
+      resetLabel={emptyChartResetLabel}
+      onReset={resetFilters}
+    />
+  );
+
+  const legendProps = {
+    onLegendItemClick: (datum: LegendItemDatum) => {
+      handleLegendFilter(datum.data.key);
+    },
+    isLegendItemSelected: (datum: LegendItemDatum) => {
+      return (
+        legendFilters.length === 0 || legendFilters.includes(datum.data.key)
+      );
+    },
+    legendItemRole: 'option',
+  };
+
+  const filterProps = {
+    isBrushable: true,
+    data: ndxGroup ? JSON.parse(JSON.stringify(ndxGroup.all())) : undefined,
+    dotRole: 'option',
+    emptyComponent,
+    id,
+    legendProps,
+    onBrush: (
+      selection: [[number, number], [number, number]],
+      scaleX: d3ScaleLinear<number, number>,
+      scaleY: d3ScaleLinear<number, number>
+    ) => {
+      if (selection) {
+        setBrushFilters({
+          minX: scaleX.invert(selection[0][0]),
+          minY: scaleY.invert(selection[1][1]),
+          maxX: scaleX.invert(selection[1][0]),
+          maxY: scaleY.invert(selection[0][1]),
+        });
+      }
+    },
+    onBrushEnd: (
+      selection: [[number, number], [number, number]],
+      scaleX?: d3ScaleLinear<number, number>,
+      scaleY?: d3ScaleLinear<number, number>
+    ) => {
+      if (selection && scaleX && scaleY) {
+        handleBrushFilter({
+          minX: scaleX.invert(selection[0][0]),
+          minY: scaleY.invert(selection[1][1]),
+          maxX: scaleX.invert(selection[1][0]),
+          maxY: scaleY.invert(selection[0][1]),
+        });
+      } else {
+        resetFilters(true, false);
+      }
+    },
+    onReset: isResetable ? resetFilters : undefined,
+    isDotSelected: (datum: DotDatum) =>
+      isFiltered(legendFilters, brushFilters)(datum),
+  };
+
+  if (isValidElement(children)) {
+    return React.cloneElement(children, { ...filterProps });
+  }
+
+  return null;
+};

package/src/components/WithFilters/WithFilters.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { isComponent } from '@redsift/design-system';
+import { FilterableBarChart } from './FilterableBarChart';
+import { FilterableDataGrid } from './FilterableDataGrid';
+import { FilterablePieChart } from './FilterablePieChart';
+import { FilterableScatterPlot } from './FilterableScatterPlot';
+import { WithFiltersProps } from './types';
+
+export const WithFilters: React.FC<WithFiltersProps> = (props) => {
+  if (isComponent('DataGrid')(props.children)) {
+    return <FilterableDataGrid {...props} />;
+  }
+
+  const { dimension } = props;
+
+  if (!dimension) {
+    return null;
+  }
+
+  if (isComponent('BarChart')(props.children)) {
+    return <FilterableBarChart {...props} dimension={dimension} />;
+  } else if (isComponent('PieChart')(props.children)) {
+    return <FilterablePieChart {...props} dimension={dimension} />;
+  } else if (isComponent('ScatterPlot')(props.children)) {
+    return <FilterableScatterPlot {...props} dimension={dimension} />;
+  }
+
+  return React.isValidElement(props.children) ? props.children : null;
+};

package/src/components/WithFilters/index.ts

@@ -0,0 +1,2 @@
+export * from './WithFilters';
+export * from './types';

package/src/components/WithFilters/types.ts

@@ -0,0 +1,45 @@
+import { ComponentProps } from 'react';
+import { DimensionSelector, Dimension, Group } from '../../types';
+import { NaturallyOrderedValue } from 'crossfilter2';
+
+interface LocaleText {
+  emptyChartTitle?: string;
+  emptyChartSubtitle?: string;
+  emptyChartResetLabel?: string;
+  resetLabel?: string;
+}
+
+type CategoryFilterType = {
+  field: string;
+  operator: 'containsAnyOf' | 'endsWithAnyOf' | 'isAnyOf' | 'startsWithAnyOf';
+};
+
+type CoordinateFilterType = {
+  field: string;
+  operator: 'isBetween';
+};
+
+export interface WithFiltersProps extends ComponentProps<'div'> {
+  /** In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. */
+  datagridCategoryDimFilter?: CategoryFilterType;
+  /** In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. */
+  datagridCoordinatesCategoryDimFilter?:
+    | [CoordinateFilterType, CoordinateFilterType]
+    | [CoordinateFilterType, CoordinateFilterType, CategoryFilterType];
+  /** Method that will be used by crossfilter to compute the dimensions of the charts. */
+  dimension?: DimensionSelector;
+  /** Method that will be used by crossfilter to compute the groups of the charts. */
+  group?: (d: Dimension) => Group;
+  /** Whether the dimension field is an array or not. */
+  isDimensionArray?: boolean;
+  /** Whether the reset button is hidden or not. */
+  isResetable?: boolean;
+  /** Overriden values for internal labels and texts. */
+  localeText?: LocaleText;
+  /** Method to call when a filter occured on the chart. */
+  onFilter?: (filters?: NaturallyOrderedValue[] | any) => void;
+}
+
+export interface ChartsWithFiltersProps
+  extends Required<Pick<WithFiltersProps, 'dimension'>>,
+    Omit<WithFiltersProps, 'dimension'> {}

package/src/hooks/useCategoricalChartAsListbox.ts

@@ -0,0 +1,131 @@
+import { BaseMixin } from 'dc';
+import { useRef, KeyboardEvent, useMemo, MutableRefObject } from 'react';
+import { Group } from '../types';
+
+type UseCategoricalChartAsListboxProps = <T extends BaseMixin<T>>(props: {
+  id: string;
+  ref: MutableRefObject<HTMLDivElement>;
+  type: 'bar' | 'slice';
+  ndxGroup?: Group;
+  orientation?: 'horizontal' | 'vertical';
+}) => void;
+
+/**
+ * Hook to give to a chart the roles, events and attributes of a listbox.
+ */
+export const useCategoricalChartAsListbox: UseCategoricalChartAsListboxProps =
+  ({ id, ref, type, ndxGroup, orientation = 'horizontal' }) => {
+    const currentIndexRef = useRef(0);
+
+    const props = useMemo(() => {
+      const numberOfGroups = ndxGroup
+        ?.all()
+        .filter((datum) => datum.value).length;
+      if (ref && numberOfGroups) {
+        const getCurrentOption = () =>
+          ref.current.querySelector(
+            `._${currentIndexRef.current}`
+          ) as HTMLElement;
+
+        const next = () => {
+          getCurrentOption().classList.remove('focused');
+          const index =
+            currentIndexRef.current === numberOfGroups - 1
+              ? 0
+              : currentIndexRef.current + 1;
+          currentIndexRef.current = index;
+          ref.current.setAttribute(
+            'aria-activedescendant',
+            `id${id}__${type}-${currentIndexRef.current}`
+          );
+          getCurrentOption().classList.add('focused');
+        };
+
+        const previous = () => {
+          getCurrentOption().classList.remove('focused');
+          const index =
+            currentIndexRef.current === 0
+              ? numberOfGroups - 1
+              : currentIndexRef.current - 1;
+          currentIndexRef.current = index;
+          ref.current.setAttribute(
+            'aria-activedescendant',
+            `id${id}__${type}-${currentIndexRef.current}`
+          );
+          getCurrentOption().classList.add('focused');
+        };
+
+        const focus = () => {
+          ref.current.setAttribute(
+            'aria-activedescendant',
+            `id${id}__${type}-0`
+          );
+          getCurrentOption().classList.add('focused');
+        };
+
+        const blur = () => {
+          getCurrentOption().classList.remove('focused');
+          currentIndexRef.current = 0;
+          ref.current.setAttribute('aria-activedescendant', '');
+        };
+
+        const keydown = (e: Event) => {
+          e.stopPropagation();
+
+          switch ((e as unknown as KeyboardEvent).code) {
+            case 'ArrowRight':
+              if (orientation === 'horizontal') {
+                e.preventDefault();
+                next();
+              }
+              break;
+            case 'ArrowLeft':
+              if (orientation === 'horizontal') {
+                e.preventDefault();
+                previous();
+              }
+              break;
+            case 'ArrowDown':
+              if (orientation === 'vertical') {
+                e.preventDefault();
+                next();
+              }
+              break;
+            case 'ArrowUp':
+              if (orientation === 'vertical') {
+                e.preventDefault();
+                previous();
+              }
+              break;
+            case 'Enter':
+            case 'Space':
+              e.preventDefault();
+              getCurrentOption().dispatchEvent(new Event('click'));
+              break;
+            default:
+              break;
+          }
+        };
+
+        return {
+          'aria-activedescendant': '',
+          'aria-multiselectable': 'true',
+          'aria-orientation': orientation,
+          role: 'listbox',
+          tabIndex: 0,
+          onFocus: focus,
+          onBlur: blur,
+          onMouseDown: (event: MouseEvent) => event.preventDefault(),
+          onMouseLeave: blur,
+          onKeyDown: keydown,
+        };
+      }
+    }, [
+      ref,
+      ref.current,
+      ndxGroup,
+      JSON.parse(JSON.stringify(ndxGroup?.all() || '')),
+    ]);
+
+    return props;
+  };

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './types';
+export * from './utils';
+
+export * from './components/ChartEmptyState';
+export * from './components/Dashboard';
+export * from './components/PdfExportButton';
+export * from './components/TimeSeriesBarChart';
+export * from './components/WithFilters';

package/src/types.ts

@@ -0,0 +1,39 @@
+import {
+  ComparableObject,
+  Crossfilter,
+  Dimension as CrossfilterDimension,
+  Group as CrossfilterGroup,
+  NaturallyOrderedValue,
+  OrderedValueSelector,
+} from 'crossfilter2';
+
+export { ChartSize, ColorTheme } from '@redsift/charts';
+
+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 TNdx = Crossfilter<any>;
+
+export type Group = CrossfilterGroup<any, NaturallyOrderedValue, unknown>;
+
+export type GroupSelector = (group: Group) => Group;
+
+export type Dimension = CrossfilterDimension<
+  any,
+  string | number | boolean | ComparableObject
+>;
+
+export type DimensionSelector = OrderedValueSelector<
+  any,
+  NaturallyOrderedValue | NaturallyOrderedValue[]
+>;

package/src/utils/groupReducers/groupReduceCount.ts

@@ -0,0 +1,5 @@
+import { Dimension } from '../../types';
+
+const groupReduceCount = (d: Dimension) => d.group().reduceCount();
+
+export const COUNT = groupReduceCount;

package/src/utils/groupReducers/groupReduceSum.ts

@@ -0,0 +1,6 @@
+import { Dimension } from '../../types';
+
+export const groupReduceSum = (field: string) => (d: Dimension) =>
+  d.group().reduceSum((d) => d[field]);
+
+export const SUM = groupReduceSum;

package/src/utils/groupReducers/index.ts

@@ -0,0 +1,2 @@
+export * from './groupReduceCount';
+export * from './groupReduceSum';

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './groupReducers';

package/tsconfig.json

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