@redsift/dashboard 8.0.1 → 8.0.2

package/src/components/TimeSeriesBarChart/styles.ts

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

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

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

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

@@ -1,179 +0,0 @@
-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;
-};