@redsift/dashboard 8.0.0 → 8.0.1

package/src/components/TimeSeriesBarChart/styles.ts

@@ -0,0 +1,94 @@
+// istanbul ignore file
+
+import styled, { css } from 'styled-components';
+import { Flexbox } from '@redsift/design-system';
+import { StyledTimeSeriesBarChartProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledTimeSeriesBarChart = styled.div<StyledTimeSeriesBarChartProps>`
+  margin: 16px;
+  padding: 16px;
+  color: var(--redsift-color-neutral-black);
+
+  .redsift-timeseries-barchart__chart {
+    display: flex;
+    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-size: 12px;
+    justify-content: center;
+    margin: 8px 0;
+  }
+
+  svg > g {
+    margin: 8px;
+  }
+
+  .grid-line,
+  .axis .grid-line,
+  .grid-line line,
+  .axis .grid-line line {
+    fill: none;
+    stroke: #ccc;
+    shape-rendering: crispEdges;
+  }
+
+  .axis text {
+    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-size: 10px;
+  }
+
+  g.stack rect.bar.deselected {
+    fill-opacity: 0.5;
+    fill: var(--redsift-color-neutral-midgrey);
+  }
+
+  .brush .custom-brush-handle {
+    fill: #eee;
+    stroke: #666;
+    cursor: ew-resize;
+  }
+
+  text {
+    user-select: none;
+  }
+`;
+
+export const StyledTimeSeriesBarChartTitle = styled(
+  Flexbox
+)<StyledTimeSeriesBarChartProps>`
+  font-family: var(--redsift-typography-h4-font-family);
+  font-size: var(--redsift-typography-h4-font-size);
+  font-weight: var(--redsift-typography-h4-font-weight);
+  line-height: var(--redsift-typography-h4-line-height);
+`;
+
+export const StyledTimeSeriesBarChartCaption = styled.p<StyledTimeSeriesBarChartProps>`
+  font-family: var(--redsift-typography-caption-font-family);
+  font-size: var(--redsift-typography-caption-font-size);
+  font-weight: var(--redsift-typography-caption-font-weight);
+  line-height: var(--redsift-typography-caption-line-height);
+`;
+
+export const StyledTimeSeriesBarChartContainer = styled.div<{
+  $isEmpty: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-family: var(--redsift-typography-font-family-source-code-pro);
+  font-size: 11px;
+  justify-content: center;
+  margin: 8px 0;
+  position: relative;
+
+  .redsift-timeseries-barchart-container__chart {
+    position: relative;
+    ${({ $isEmpty }) =>
+      $isEmpty
+        ? css`
+            display: none;
+          `
+        : ''};
+  }
+`;

package/src/components/TimeSeriesBarChart/types.ts

@@ -0,0 +1,82 @@
+// istanbul ignore file
+
+import { ComponentProps } from 'react';
+import { ValueOf } from '@redsift/design-system';
+import { ColorTheme, DimensionSelector, JSONArray } from '../../types';
+
+type SuccessDangerColorTheme = {
+  success: string;
+  warning: string;
+  danger: string;
+  neutral?: string;
+};
+
+/**
+ * Component size.
+ */
+export const TimeSeriesBarChartSize = {
+  large: 'large',
+  medium: 'medium',
+  small: 'small',
+} as const;
+export type TimeSeriesBarChartSize = ValueOf<typeof TimeSeriesBarChartSize>;
+
+/**
+ * Component theme.
+ */
+export const TimeSeriesBarChartTheme = ColorTheme;
+export type TimeSeriesBarChartTheme = ValueOf<typeof TimeSeriesBarChartTheme>;
+
+export type datetimeEnum = 'hour' | 'day' | 'week' | 'month' | 'year';
+
+interface LocaleText {
+  emptyChartTitle?: string;
+  emptyChartSubtitle?: string;
+  emptyChartResetLabel?: string;
+  resetLabel?: string;
+}
+
+/**
+ * Component props.
+ */
+export interface TimeSeriesBarChartProps extends ComponentProps<'div'> {
+  /** Caption. */
+  caption?: string;
+  /** Whether the x axis labels are rotated or not. */
+  areXLabelsRotated?: boolean;
+  /** Field value of the DataGrid column to filter. */
+  columnToFilter?: string;
+  /** Dataset to use to generate the chart, if no context is provided. */
+  data?: JSONArray;
+  /** Name of the dataset field that contains the datetime value. */
+  dateTimeFieldName: string;
+  /** Format used for the date and time values in the dataset by d3.js. Should follow https://github.com/d3/d3-time-format#locale_format. */
+  dateTimeFormat?: string;
+  /** Datetime unit to used to group values and for x units. */
+  dateTimeGroup?: datetimeEnum;
+  /** Method that will be used by crossfilter to compute the dimensions of the charts. */
+  dimension: DimensionSelector;
+  /** 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?: string[], allFiltered?: JSONArray) => void;
+  /** TimeSeriesChart size. */
+  size?: TimeSeriesBarChartSize;
+  /** 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.  */
+  theme?: TimeSeriesBarChartTheme | SuccessDangerColorTheme;
+  /** Title. */
+  title?: string;
+  /** Dataset key to use to stack values. */
+  stackedCategory?: string;
+  /** X Axis Label. */
+  xAxisLabel?: string;
+  /** Y Axis Label. */
+  yAxisLabel?: string;
+}
+
+export type StyledTimeSeriesBarChartProps = Omit<
+  TimeSeriesBarChartProps,
+  'dimension' | 'dateTimeFieldName'
+> & {};

package/src/components/WithFilters/FilterableBarChart.tsx

@@ -0,0 +1,181 @@
+import { GridFilterItem } from '@redsift/table';
+import { BarDatum } from '@redsift/charts';
+import { Dimension, Group } from '../../types';
+import React, {
+  useEffect,
+  useContext,
+  useId,
+  useState,
+  isValidElement,
+  useRef,
+  MutableRefObject,
+} from 'react';
+import { CrossfilterRegistry } from '../CrossfilterRegistry';
+import { DashboardContext, DashboardReducerActionType } from '../Dashboard';
+import { ChartEmptyState } from '../ChartEmptyState';
+import { ChartsWithFiltersProps } from './types';
+import { useCategoricalChartAsListbox } from '@redsift/dashboard/hooks/useCategoricalChartAsListbox';
+
+export const FilterableBarChart: React.FC<ChartsWithFiltersProps> = (props) => {
+  const {
+    children,
+    datagridCategoryDimFilter,
+    dimension,
+    group,
+    id: propsId,
+    isDimensionArray,
+    isResetable,
+    localeText,
+    onFilter,
+  } = props;
+  const id = (propsId ?? useId()).replace(/:/g, '');
+  const ref = useRef<HTMLDivElement>();
+
+  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 [filters, setFilters] = useState<string[]>([]);
+
+  const handleFilter = (category: string) => {
+    let newFilters: string[];
+    if (filters.includes(category)) {
+      newFilters = filters.filter((f) => f !== category);
+    } else {
+      newFilters = [...filters, category];
+    }
+
+    setFilters(newFilters);
+    if (newFilters.length) {
+      ndxDimension!.filter((d) => newFilters.includes(d as string));
+    } else {
+      ndxDimension!.filterAll();
+    }
+    toggleUpdateContext?.();
+
+    if (datagridCategoryDimFilter) {
+      dispatch?.({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: id,
+          columnField: datagridCategoryDimFilter.field,
+          operatorValue: datagridCategoryDimFilter.operator,
+          value: newFilters,
+        },
+      });
+    }
+
+    if (onFilter) {
+      onFilter(newFilters);
+    }
+  };
+
+  const resetFilters = () => {
+    setFilters([]);
+    ndxDimension!.filterAll();
+    toggleUpdateContext?.();
+
+    if (datagridCategoryDimFilter) {
+      dispatch?.({
+        type: DashboardReducerActionType.ResetFilter,
+        filter: {
+          id: id,
+          columnField: datagridCategoryDimFilter.field,
+          operatorValue: datagridCategoryDimFilter.operator,
+        } as GridFilterItem,
+      });
+    }
+
+    if (onFilter) {
+      onFilter();
+    }
+  };
+
+  useEffect(() => {
+    if (!datagridCategoryDimFilter) {
+      return;
+    }
+
+    const updatedFilters = tableFilters.find(
+      (filter) =>
+        filter.columnField === datagridCategoryDimFilter.field &&
+        filter.operatorValue === datagridCategoryDimFilter.operator
+    )?.value;
+    if (updatedFilters && updatedFilters !== filters) {
+      setFilters(updatedFilters);
+      if (updatedFilters.length) {
+        ndxDimension!.filter((d) => updatedFilters.includes(d));
+      } else {
+        ndxDimension!.filterAll();
+      }
+      toggleUpdateContext?.();
+    }
+  }, [tableFilters]);
+
+  const emptyComponent = (
+    <ChartEmptyState
+      title={emptyChartTitle!}
+      subtitle={emptyChartSubtitle}
+      resetLabel={emptyChartResetLabel}
+      onReset={resetFilters}
+    />
+  );
+
+  const chartProps = useCategoricalChartAsListbox({
+    id,
+    ref: ref as MutableRefObject<HTMLDivElement>,
+    type: 'bar',
+    ndxGroup,
+    orientation: 'vertical',
+  });
+
+  const filterProps = {
+    barProps: {
+      tabIndex: -1,
+    },
+    barRole: 'option',
+    chartProps: chartProps,
+    chartRef: ref,
+    data: ndxGroup ? JSON.parse(JSON.stringify(ndxGroup.all())) : undefined,
+    emptyComponent,
+    id,
+    isBarSelected: (datum: BarDatum) => {
+      return filters.length === 0 || filters.includes(datum.data.key);
+    },
+    onBarClick: (datum: BarDatum) => {
+      handleFilter(datum.data.key);
+    },
+    onReset: isResetable ? resetFilters : undefined,
+  };
+
+  if (isValidElement(children)) {
+    return React.cloneElement(children, { ...filterProps });
+  }
+
+  return null;
+};

package/src/components/WithFilters/FilterableDataGrid.tsx

@@ -0,0 +1,45 @@
+import { GridFilterModel } from '@redsift/table';
+import React, { useContext, isValidElement, useState, useEffect } from 'react';
+import { DashboardContext, DashboardReducerActionType } from '../Dashboard';
+import { WithFiltersProps } from './types';
+
+export const FilterableDataGrid: React.FC<WithFiltersProps> = (props) => {
+  const { children, onFilter } = props;
+
+  const { state, data, dispatch, dataGridApiRef } =
+    useContext(DashboardContext);
+  const { tableFilters } = state;
+
+  const [filterModel, setFilterModel] = useState<GridFilterModel>();
+  useEffect(() => {
+    setFilterModel({
+      ...filterModel,
+      items: tableFilters,
+    });
+  }, [tableFilters]);
+
+  const updateChartFilters = (filterModel: GridFilterModel) => {
+    dispatch?.({
+      type: DashboardReducerActionType.FilterTableBatch,
+      filter: filterModel.items,
+    });
+  };
+
+  if (isValidElement(children)) {
+    const filterProps = {
+      apiRef: children.props.apiRef ?? dataGridApiRef,
+      rows: data || [],
+      filterModel,
+      onFilterModelChange: (filterModel: GridFilterModel) => {
+        if (onFilter) {
+          onFilter(filterModel);
+        }
+        updateChartFilters(filterModel);
+      },
+    };
+
+    return React.cloneElement(children, { ...filterProps });
+  }
+
+  return null;
+};

package/src/components/WithFilters/FilterablePieChart.tsx

@@ -0,0 +1,179 @@
+import { GridFilterItem } from '@redsift/table';
+import { ArcDatum } from '@redsift/charts';
+import { Dimension, Group } from '../../types';
+import React, {
+  useEffect,
+  useContext,
+  useId,
+  useState,
+  isValidElement,
+  useRef,
+  MutableRefObject,
+} from 'react';
+import { CrossfilterRegistry } from '../CrossfilterRegistry';
+import { DashboardContext, DashboardReducerActionType } from '../Dashboard';
+import { ChartEmptyState } from '../ChartEmptyState';
+import { ChartsWithFiltersProps } from './types';
+import { useCategoricalChartAsListbox } from '@redsift/dashboard/hooks/useCategoricalChartAsListbox';
+
+export const FilterablePieChart: React.FC<ChartsWithFiltersProps> = (props) => {
+  const {
+    children,
+    datagridCategoryDimFilter,
+    dimension,
+    group,
+    id: propsId,
+    isDimensionArray,
+    isResetable,
+    localeText,
+    onFilter,
+  } = props;
+  const id = (propsId ?? useId()).replace(/:/g, '');
+  const ref = useRef<HTMLDivElement>();
+
+  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 [filters, setFilters] = useState<string[]>([]);
+
+  const handleFilter = (category: string) => {
+    let newFilters: string[];
+    if (filters.includes(category)) {
+      newFilters = filters.filter((f) => f !== category);
+    } else {
+      newFilters = [...filters, category];
+    }
+
+    setFilters(newFilters);
+    if (newFilters.length) {
+      ndxDimension!.filter((d) => newFilters.includes(d as string));
+    } else {
+      ndxDimension!.filterAll();
+    }
+    toggleUpdateContext?.();
+
+    if (datagridCategoryDimFilter) {
+      dispatch?.({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: id,
+          columnField: datagridCategoryDimFilter.field,
+          operatorValue: datagridCategoryDimFilter.operator,
+          value: newFilters,
+        },
+      });
+    }
+
+    if (onFilter) {
+      onFilter(newFilters);
+    }
+  };
+
+  const resetFilters = () => {
+    setFilters([]);
+    ndxDimension!.filterAll();
+    toggleUpdateContext?.();
+
+    if (datagridCategoryDimFilter) {
+      dispatch?.({
+        type: DashboardReducerActionType.ResetFilter,
+        filter: {
+          id: id,
+          columnField: datagridCategoryDimFilter.field,
+          operatorValue: datagridCategoryDimFilter.operator,
+        } as GridFilterItem,
+      });
+    }
+
+    if (onFilter) {
+      onFilter();
+    }
+  };
+
+  const updatedFilters = datagridCategoryDimFilter
+    ? tableFilters.find(
+        (filter) =>
+          filter.columnField === datagridCategoryDimFilter.field &&
+          filter.operatorValue === datagridCategoryDimFilter.operator
+      )?.value
+    : null;
+  useEffect(() => {
+    if (updatedFilters && updatedFilters !== filters) {
+      setFilters(updatedFilters);
+      if (updatedFilters.length) {
+        ndxDimension!.filter((d) => updatedFilters.includes(d));
+      } else {
+        ndxDimension!.filterAll();
+      }
+      toggleUpdateContext?.();
+    }
+  }, [updatedFilters]);
+
+  const emptyComponent = (
+    <ChartEmptyState
+      title={emptyChartTitle!}
+      subtitle={emptyChartSubtitle}
+      resetLabel={emptyChartResetLabel}
+      onReset={resetFilters}
+    />
+  );
+
+  const chartProps = useCategoricalChartAsListbox({
+    id,
+    ref: ref as MutableRefObject<HTMLDivElement>,
+    type: 'bar',
+    ndxGroup,
+    orientation: 'horizontal',
+  });
+
+  const filterProps = {
+    sliceProps: {
+      tabIndex: -1,
+    },
+    sliceRole: 'option',
+    chartProps: chartProps,
+    chartRef: ref,
+    data: ndxGroup ? JSON.parse(JSON.stringify(ndxGroup.all())) : undefined,
+    emptyComponent,
+    id,
+    isSliceSelected: (datum: ArcDatum) => {
+      return filters.length === 0 || filters.includes(datum.data.key);
+    },
+    onSliceClick: (datum: ArcDatum) => {
+      handleFilter(datum.data.key);
+    },
+    onReset: isResetable ? resetFilters : undefined,
+  };
+
+  if (isValidElement(children)) {
+    return React.cloneElement(children, { ...filterProps });
+  }
+
+  return null;
+};