@redsift/dashboard 8.0.1 → 8.0.3

package/src/components/WithFilters/FilterableScatterPlot.tsx

@@ -1,335 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

package/src/components/WithFilters/types.ts

@@ -1,45 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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

package/src/utils/groupReducers/groupReduceSum.ts

@@ -1,6 +0,0 @@
-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

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

package/src/utils/index.ts

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

package/tsconfig.json

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