@redsift/dashboard 8.0.0 → 8.0.1

package/src/components/PdfExportButton/types.ts

@@ -0,0 +1,59 @@
+// istanbul ignore file
+
+import { GridStateColDef, GridValidRowModel } from '@mui/x-data-grid-pro';
+import { ButtonProps } from '@redsift/design-system';
+import { RefObject } from 'react';
+
+interface LocaleText {
+  maxSizeDisclaimer?: string;
+}
+export interface PdfExportButtonProps extends ButtonProps {
+  /** Ref to the DOM component to export. By default, will be the ref to the parent Dashboard. */
+  componentRef?: RefObject<HTMLElement>;
+  /** Name of the exported PDF file. */
+  fileName?: string;
+  /** Text to display at the beginning of the PDF. */
+  introduction?: string;
+  /** Labels and texts. */
+  localeText?: LocaleText;
+  /** Image to put at the top of the PDF (SVG format not supported). */
+  logo?: string;
+  /** Function to be executed when button is clicked. */
+  onClick?: () => void;
+  /** Color used for the header and footer of the PDF. */
+  primaryColor?: string;
+}
+
+export type PdfTableColumn = GridStateColDef<any, any, any>;
+
+export type PdfStyles = { [key: string]: any };
+
+export interface PdfTableRowProps {
+  columns: PdfTableColumn[];
+  rowData: GridValidRowModel;
+  rowIndex: number;
+  styles: PdfStyles;
+  totalWidth: number;
+}
+
+export interface PdfTableProps {
+  dataTable: PdfTableData;
+  styles: PdfStyles;
+  localeText?: LocaleText;
+}
+
+export interface PdfTableData {
+  columns: PdfTableColumn[];
+  data: GridValidRowModel[];
+  totalWidth: number;
+  dimensions?: { width: number; height: number };
+}
+
+export interface PdfDocumentProps {
+  dashboardImage: string;
+  dataTable?: PdfTableData;
+  introduction?: string;
+  localeText?: LocaleText;
+  logo?: string;
+  primaryColor: string;
+}

package/src/components/TimeSeriesBarChart/TimeSeriesBarChart.tsx

@@ -0,0 +1,565 @@
+// istanbul ignore file
+
+import React, {
+  forwardRef,
+  RefObject,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import classNames from 'classnames';
+import {
+  config as dcconfig,
+  filterAll as dcfilterAll,
+  filters as dcfilters,
+  redrawAll as dcredrawAll,
+  barChart as dcbarChart,
+  BarChart as dcBarChart,
+  UnitFunction as dcUnitFunction,
+} from 'dc';
+import {
+  scaleTime as d3scaleTime,
+  timeFormat as d3timeFormat,
+  isoParse as d3isoParse,
+  utcParse as d3utcParse,
+  timeHour as d3timeHour,
+  timeHours as d3timeHours,
+  timeDay as d3timeDay,
+  timeDays as d3timeDays,
+  timeWeek as d3timeWeek,
+  timeWeeks as d3timeWeeks,
+  timeMonth as d3timeMonth,
+  timeMonths as d3timeMonths,
+  timeYear as d3timeYear,
+  timeYears as d3timeYears,
+} from 'd3';
+
+import { Button, Comp } from '@redsift/design-system';
+import { scheme, useColor } from '@redsift/charts';
+
+import { DashboardContext, DashboardReducerActionType } from '../Dashboard';
+import {
+  TimeSeriesBarChartProps,
+  TimeSeriesBarChartSize,
+  TimeSeriesBarChartTheme,
+} from './types';
+import { JSONObject, JSONArray } from '../../types';
+import {
+  StyledTimeSeriesBarChart,
+  StyledTimeSeriesBarChartCaption,
+  StyledTimeSeriesBarChartTitle,
+  StyledTimeSeriesBarChartContainer,
+} from './styles';
+import { GridFilterItem } from '@redsift/table';
+import { ChartEmptyState } from '../ChartEmptyState';
+import { CrossfilterRegistry } from '../CrossfilterRegistry';
+
+const COMPONENT_NAME = 'TimeSeriesBarChart';
+const CLASSNAME = 'redsift-timeseries-barchart';
+const DEFAULT_PROPS: Partial<TimeSeriesBarChartProps> = {
+  dateTimeFormat: '%Y-%m-%d %H:%M:%S',
+  dateTimeGroup: 'month',
+  isResetable: true,
+  localeText: {
+    resetLabel: 'Reset',
+  },
+  size: TimeSeriesBarChartSize.medium,
+};
+
+type ChartDimensions = {
+  width: number;
+  height: number;
+  marginTop?: number;
+  marginRight?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+};
+
+const getStartDate = (dates: Date[]) =>
+  new Date(Math.min(...dates.map(Number)));
+const getEndDate = (dates: Date[]) => new Date(Math.max(...dates.map(Number)));
+
+const sizeToDimension = (size: TimeSeriesBarChartSize): ChartDimensions => {
+  switch (size) {
+    case TimeSeriesBarChartSize.small:
+      return {
+        width: 400,
+        height: 200,
+        marginLeft: 16,
+        marginTop: 16,
+        marginRight: 16,
+        marginBottom: 32,
+      };
+    case TimeSeriesBarChartSize.large:
+      return {
+        width: 1000,
+        height: 300,
+        marginLeft: 16,
+        marginTop: 16,
+        marginRight: 16,
+        marginBottom: 32,
+      };
+    case TimeSeriesBarChartSize.medium:
+    default:
+      return {
+        width: 600,
+        height: 250,
+        marginLeft: 16,
+        marginTop: 16,
+        marginRight: 16,
+        marginBottom: 32,
+      };
+  }
+};
+
+const parseDateTimeGroup = (
+  data: JSONArray,
+  dateTimeGroup: TimeSeriesBarChartProps['dateTimeGroup'],
+  dateTimeFieldName: string
+) => {
+  const dates = [
+    ...data.map(
+      (d: (typeof data)[number]) => new Date(d[dateTimeFieldName] as string)
+    ),
+  ];
+  const startDate = getStartDate(dates);
+  const endDate = getEndDate(dates);
+
+  switch (dateTimeGroup) {
+    case 'hour':
+      return {
+        group: (g: Date) => d3timeHour(g),
+        round: (x: Date) => d3timeHour(x),
+        x: d3scaleTime().domain([
+          d3timeHour.offset(startDate, -1),
+          d3timeHour.offset(endDate, 2),
+        ]),
+        xUnits: d3timeHours,
+      };
+    case 'day':
+      return {
+        group: (g: Date) => d3timeDay(g),
+        round: (x: Date) => d3timeDay(x),
+        x: d3scaleTime().domain([
+          d3timeDay.offset(startDate, -1),
+          d3timeDay.offset(endDate, 2),
+        ]),
+        xUnits: d3timeDays,
+      };
+    case 'week':
+      return {
+        group: (g: Date) => d3timeWeek(g),
+        round: (x: Date) => d3timeWeek(x),
+        x: d3scaleTime().domain([
+          d3timeWeek.offset(startDate, -1),
+          d3timeWeek.offset(endDate, 2),
+        ]),
+        xUnits: d3timeWeeks,
+      };
+    case 'year':
+      return {
+        group: (g: Date) => d3timeYear(g),
+        round: (x: Date) => d3timeYear(x),
+        x: d3scaleTime().domain([
+          d3timeYear.offset(startDate, -2),
+          d3timeYear.offset(endDate, 2),
+        ]),
+        xUnits: d3timeYears,
+      };
+    case 'month':
+    default:
+      return {
+        group: (g: Date) => d3timeMonth(g),
+        round: (x: Date) => d3timeMonth(x),
+        x: d3scaleTime().domain([
+          d3timeMonth.offset(startDate, -1),
+          d3timeMonth.offset(endDate, 2),
+        ]),
+        xUnits: d3timeMonths,
+      };
+  }
+};
+
+export const TimeSeriesBarChart: Comp<TimeSeriesBarChartProps, HTMLDivElement> =
+  forwardRef((props, ref) => {
+    const containerRef = (ref ||
+      useRef<HTMLDivElement>()) as RefObject<HTMLDivElement>;
+    const chartRef = useRef<HTMLDivElement>() as RefObject<HTMLDivElement>;
+
+    const id = useId();
+    const [chart, setChart] = useState<dcBarChart>();
+
+    const {
+      areXLabelsRotated,
+      caption,
+      className,
+      columnToFilter,
+      data: propsData,
+      dateTimeFieldName,
+      dateTimeFormat = DEFAULT_PROPS.dateTimeFormat,
+      dateTimeGroup = DEFAULT_PROPS.dateTimeGroup,
+      dimension,
+      isResetable,
+      localeText,
+      onFilter,
+      size = DEFAULT_PROPS.size,
+      theme = props.stackedCategory
+        ? TimeSeriesBarChartTheme.default
+        : TimeSeriesBarChartTheme.monochrome,
+      title,
+      stackedCategory,
+      xAxisLabel,
+      yAxisLabel,
+      ...forwardedProps
+    } = props;
+
+    // Get overriden labels and texts.
+    const {
+      emptyChartTitle,
+      emptyChartSubtitle,
+      emptyChartResetLabel,
+      resetLabel,
+    } = {
+      ...DEFAULT_PROPS.localeText,
+      ...localeText,
+    };
+
+    // Get charts dimensions based on the selected size.
+    const chartDimensions = sizeToDimension(size!);
+
+    // Get ndx from context or initialize it.
+    const { dispatch, state, data } = useContext(DashboardContext);
+    const { tableFilters } = state;
+
+    // Set color scheme.
+    const colorScale = useColor({
+      data: propsData ?? data,
+      theme: theme!,
+      category: stackedCategory!,
+    });
+
+    const ndx = CrossfilterRegistry.get(propsData ? propsData : data);
+
+    // useEffect called only once to initialize the chart.
+    useEffect(() => {
+      if (chartRef.current) {
+        dcconfig.defaultColors(scheme.default);
+        const parseTime = d3utcParse(dateTimeFormat!);
+        const barChart = dcbarChart(chartRef.current as any);
+        const dataset = ndx.all();
+
+        // Get time methods based on props
+        const { group, round, x, xUnits } = parseDateTimeGroup(
+          dataset as JSONArray,
+          dateTimeGroup,
+          dateTimeFieldName
+        );
+
+        // Compute dimension and group.
+        const computedDimension = ndx.dimension(
+          (d: JSONArray) => parseTime(dimension(d) as string) as Date
+        );
+        const timeGroup = computedDimension.group(group);
+
+        // Initialize the chart.
+        barChart
+          .width(chartDimensions.width)
+          .height(chartDimensions.height - (areXLabelsRotated ? 30 : 0))
+          .dimension(computedDimension)
+          .x(x)
+          .xUnits(xUnits as dcUnitFunction)
+          .round(round)
+          .centerBar(true)
+          .alwaysUseRounding(true)
+          .renderHorizontalGridLines(true)
+          .margins({
+            left: chartDimensions.marginLeft! + (yAxisLabel ? 24 : 0),
+            top: chartDimensions.marginTop!,
+            right: chartDimensions.marginRight!,
+            bottom: chartDimensions.marginBottom!,
+          })
+          .barPadding(0.2);
+
+        barChart.yAxis().ticks(5);
+
+        // Add label to axis.
+        if (xAxisLabel) {
+          barChart.xAxisLabel(xAxisLabel);
+        }
+        if (yAxisLabel) {
+          barChart.yAxisLabel(yAxisLabel);
+        }
+
+        // Rotate labels and reset the height, if asked for.
+        if (areXLabelsRotated) {
+          barChart.on('pretransition', (rowChart) => {
+            barChart
+              .select('.axis')
+              .attr('text-anchor', 'end')
+              .selectAll('text')
+              .attr('transform', 'translate(-6,5) rotate(-45)');
+            rowChart.select('svg').attr('height', chartDimensions.height);
+          });
+        }
+
+        // Set group whether the chart is stacked or not.
+        if (!stackedCategory) {
+          barChart.group(timeGroup).colors(colorScale as any);
+        } else if (dataset.length) {
+          if (!Array.isArray(dataset[0][stackedCategory])) {
+            const categories = dataset.reduce(
+              (acc: string[], curr: JSONObject) => {
+                if (acc.indexOf(curr[stackedCategory] as string) === -1) {
+                  acc.push(curr[stackedCategory] as string);
+                }
+                return acc;
+              },
+              []
+            );
+            const stackedTimeGroup = timeGroup.reduce(
+              (p, v) => {
+                (p as JSONObject)[v[stackedCategory]] =
+                  (((p as JSONObject)[v[stackedCategory]] as number) || 0) + 1;
+                return p;
+              },
+              (p, v) => {
+                (p as JSONObject)[v[stackedCategory]] =
+                  (((p as JSONObject)[v[stackedCategory]] as number) || 0) - 1;
+                return p;
+              },
+              () => ({})
+            );
+            barChart
+              .group(
+                stackedTimeGroup,
+                categories[0], // @ts-expect-error
+                (
+                  (cat) =>
+                  (d: { key: Date; value: { [key: string]: number } }) =>
+                    d.value[cat]
+                )(categories[0])
+              )
+              .colors(colorScale as any);
+            for (var i = 1; i < categories.length; ++i) {
+              barChart.stack(
+                stackedTimeGroup,
+                categories[i],
+                (
+                  (cat) => (d) =>
+                    d.value[cat]
+                )(categories[i])
+              );
+            }
+          } else {
+            const categories = dataset.reduce(
+              (acc: string[], curr: JSONObject) => {
+                (curr[stackedCategory] as string[]).forEach((val: string) => {
+                  if (acc.indexOf(val) === -1) {
+                    acc.push(val);
+                  }
+                });
+                return acc;
+              },
+              []
+            );
+            const stackedTimeGroup = timeGroup.reduce(
+              (p, v) => {
+                v[stackedCategory].forEach((val: string) => {
+                  (p as JSONObject)[val] =
+                    (((p as JSONObject)[val] as number) || 0) + 1;
+                });
+                return p;
+              },
+              (p, v) => {
+                v[stackedCategory].forEach((val: string) => {
+                  (p as JSONObject)[val] =
+                    (((p as JSONObject)[val] as number) || 0) - 1;
+                });
+                return p;
+              },
+              () => ({})
+            );
+            barChart
+              .group(
+                stackedTimeGroup,
+                categories[0], // @ts-expect-error
+                (
+                  (cat) =>
+                  (d: { key: Date; value: { [key: string]: number } }) =>
+                    d.value[cat]
+                )(categories[0])
+              )
+              .colors(colorScale as any);
+            for (var i = 1; i < categories.length; ++i) {
+              barChart.stack(
+                stackedTimeGroup,
+                categories[i],
+                (
+                  (cat) =>
+                  (d: { key: Date; value: { [key: string]: number } }) =>
+                    d.value[cat]
+                )(categories[i])
+              );
+            }
+          }
+        }
+
+        // Dispatch filters to datagrid when a value is selected or unselected.
+        const formatTime = d3timeFormat('%Y-%m-%dT%H:%M');
+        barChart.on('filtered', () => {
+          if (columnToFilter) {
+            const dateArray = barChart.filters()?.[0];
+            if (Array.isArray(dateArray) && dateArray.length === 2) {
+              dispatch?.({
+                type: DashboardReducerActionType.FilterTableBatch,
+                filter: [
+                  {
+                    id: `${barChart.anchorName()}-start`,
+                    columnField: columnToFilter,
+                    operatorValue: 'after',
+                    value: formatTime(dateArray[0]),
+                  },
+                  {
+                    id: `${barChart.anchorName()}-end`,
+                    columnField: columnToFilter,
+                    operatorValue: 'onOrBefore',
+                    value: formatTime(dateArray[1]),
+                  },
+                ],
+              });
+            }
+          }
+
+          onFilter?.(barChart.filters(), ndx.allFiltered());
+        });
+
+        // Render the chart.
+        barChart.render();
+
+        // Store chart for further use.
+        setChart(barChart);
+      }
+    }, [propsData, data]);
+
+    // Filter chart if context is updated by an external component.
+    const filterStart = tableFilters.find(
+      (filter) =>
+        filter.columnField === columnToFilter &&
+        filter.operatorValue === 'after'
+    );
+    const filterEnd = tableFilters.find(
+      (filter) =>
+        filter.columnField === columnToFilter &&
+        filter.operatorValue === 'onOrBefore'
+    );
+    useEffect(() => {
+      if (
+        chart &&
+        filterStart &&
+        filterEnd &&
+        filterStart.value &&
+        filterEnd.value
+      ) {
+        const chartFiltersObj = chart.filters();
+        const chartFilters = chartFiltersObj?.[0];
+        const chartFilterStart = chartFilters?.[0];
+        const chartFilterEnd = chartFilters?.[1];
+        if (
+          chartFilterStart !== d3isoParse(filterStart.value) &&
+          chartFilterEnd !== d3isoParse(filterEnd.value)
+        ) {
+          chart.filter(null);
+          chart.filter(
+            dcfilters.RangedFilter(
+              d3isoParse(filterStart.value)?.getTime() || 0,
+              d3isoParse(filterEnd.value)?.getTime() || 0
+            )
+          );
+          dcredrawAll();
+        }
+      }
+    }, [filterStart?.value, filterEnd?.value]);
+
+    return (
+      <StyledTimeSeriesBarChart
+        {...forwardedProps}
+        className={classNames(TimeSeriesBarChart.className, className)}
+        ref={containerRef as RefObject<HTMLDivElement>}
+      >
+        <StyledTimeSeriesBarChartTitle
+          className={`${TimeSeriesBarChart.className}__title`}
+          alignItems="center"
+        >
+          {title ? <div id={`id${id}__title`}>{title}</div> : null}
+          {chart && isResetable ? (
+            <Button
+              variant="unstyled"
+              onClick={() => {
+                chart.filter(null);
+                dcredrawAll();
+
+                if (columnToFilter) {
+                  dispatch?.({
+                    type: DashboardReducerActionType.ResetFilter,
+                    filter: {
+                      id: `${chart.anchorName()}-start`,
+                      columnField: columnToFilter,
+                      operatorValue: 'after',
+                    } as GridFilterItem,
+                  });
+                  dispatch?.({
+                    type: DashboardReducerActionType.ResetFilter,
+                    filter: {
+                      id: `${chart.anchorName()}-end`,
+                      columnField: columnToFilter,
+                      operatorValue: 'onOrBefore',
+                    } as GridFilterItem,
+                  });
+                }
+              }}
+            >
+              {resetLabel}
+            </Button>
+          ) : null}
+        </StyledTimeSeriesBarChartTitle>
+
+        <StyledTimeSeriesBarChartContainer
+          className={`${TimeSeriesBarChart.className}__container`}
+          $isEmpty={ndx.all().length === 0}
+        >
+          <div
+            className={`${TimeSeriesBarChart.className}-container__chart`}
+            ref={chartRef as RefObject<HTMLDivElement>}
+          />
+          {ndx.all().length === 0 ? (
+            <ChartEmptyState
+              title={emptyChartTitle!}
+              subtitle={emptyChartSubtitle}
+              resetLabel={emptyChartResetLabel}
+              onReset={() => {
+                dcfilterAll();
+                dcredrawAll();
+                dispatch?.({
+                  type: DashboardReducerActionType.ResetFilters,
+                });
+              }}
+            />
+          ) : null}
+        </StyledTimeSeriesBarChartContainer>
+
+        {caption ? (
+          <StyledTimeSeriesBarChartCaption
+            className={`${TimeSeriesBarChart.className}__caption`}
+            id={`id${id}__caption`}
+          >
+            {caption}
+          </StyledTimeSeriesBarChartCaption>
+        ) : null}
+      </StyledTimeSeriesBarChart>
+    );
+  });
+TimeSeriesBarChart.className = CLASSNAME;
+TimeSeriesBarChart.defaultProps = DEFAULT_PROPS;
+TimeSeriesBarChart.displayName = COMPONENT_NAME;

package/src/components/TimeSeriesBarChart/index.ts

@@ -0,0 +1,4 @@
+// istanbul ignore file
+
+export * from './TimeSeriesBarChart';
+export * from './types';