@sis-cc/dotstatsuite-components 22.0.1 → 22.0.3

package/src/viewer/src/chartUtils/options.js

@@ -0,0 +1,30 @@
+import * as R from 'ramda';
+import { getChartOptions } from '../../../rules/src/chart/getChartOptions';
+import { getFontFromTheme, getOptionsFromFont } from '../utils';
+
+export default (options, data, type, theme, timeFormats, locale) => {
+  const axisFontOptions = R.pipe(getFontFromTheme(['axis']), getOptionsFromFont)(theme);
+  const annotationFontOptions = R.pipe(getFontFromTheme(['annotation']), getOptionsFromFont)(theme);
+  const tooltipFonts = {
+    primary: getFontFromTheme(['tooltip', 'primary'])(theme),
+    secondary: getFontFromTheme(['tooltip', 'secondary'])(theme)
+  };
+  const optionsWithFonts = R.evolve({
+    axis: R.pipe(
+      R.over(
+        R.lensPath(['x', 'font']),
+        R.pipe(R.when(R.isNil, R.always({})), R.mergeRight(axisFontOptions))
+      ),
+      R.over(
+        R.lensPath(['y', 'font']),
+        R.pipe(R.when(R.isNil, R.always({})), R.mergeRight(axisFontOptions))
+      )
+    ),
+    serie: R.over(
+      R.lensPath(['annotation', 'font']),
+      R.pipe(R.when(R.isNil, R.always({})), R.mergeRight(annotationFontOptions))
+    )
+  })(options);
+
+  return getChartOptions(data, type, optionsWithFonts, tooltipFonts, timeFormats, locale);
+};

package/src/viewer/src/chartUtils/series.js

@@ -0,0 +1,51 @@
+import * as R from 'ramda';
+import { H_SYMBOL, TIMELINE, V_SYMBOL } from '../../../rules/src/constants';
+
+const isFocused = (obj) => {
+  const highlightIndex = R.propOr(-1, 'highlightIndex', obj);
+  const baselineIndex = R.propOr(-1, 'baselineIndex', obj);
+  return ((highlightIndex > -1) || (baselineIndex > -1));
+};
+
+const sampleFilterSeries = (series) => (
+  R.map(
+    serie => {
+      const _datapoints = R.filter(isFocused, serie.datapoints);
+      return { ...serie, datapoints: _datapoints };
+    },
+    series
+  )
+);
+
+const lineFilterSeries = R.filter(isFocused);
+
+export default (series, type, options) => {
+  const responsiveFocusFilter = R.pathOr(true, ['serie', 'responsiveFocusFilter'], options);
+  if (!responsiveFocusFilter) {
+    return series;
+  }
+  const height = R.path(['base', 'height'], options);
+  const width = R.path(['base', 'width'], options);
+  const minWidth = R.path(['base', 'minDisplayWidth'], options);
+  const minHeight = R.path(['base', 'minDisplayHeight'], options);
+  let filtered;
+  if (type === H_SYMBOL) {
+    if (height < minHeight) {
+      filtered = sampleFilterSeries(series);
+      return R.isEmpty(filtered[0].datapoints) ? series : filtered;
+    }
+  }
+  else if (type === TIMELINE) {
+    if (height < minHeight) {
+      filtered = lineFilterSeries(series);
+      return R.isEmpty(filtered) ? series : filtered;
+    }
+  }
+  else if (type === V_SYMBOL) {
+    if (width < minWidth) {
+      filtered = sampleFilterSeries(series);
+      return R.isEmpty(filtered[0].datapoints) ? series : filtered;
+    }
+  }
+  return series;
+};

package/src/viewer/src/footer.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DataFooter } from '@sis-cc/dotstatsuite-visions';
+import ChartLegends from './legends/ChartLegends.jsx';
+import { isChartNoData } from './utils';
+
+const Footer = ({ type, chartData, source, logo, copyright, chartOptions, isSticky, target, width }) => {
+  const hasNoLegend = type === 'table' || isChartNoData({ data: chartData, type });
+  const legend = hasNoLegend ? null : <ChartLegends data={chartData} options={chartOptions} type={type} width={width} />;
+
+  return (
+    <div {...(target ? { ref: target } : {})}>
+      <DataFooter
+        source={source}
+        logo={logo}
+        copyright={copyright}
+        legend={legend}
+        isSticky={isSticky}
+      />
+    </div>
+  );
+};
+
+export default Footer;

package/src/viewer/src/header.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DataHeader } from '@sis-cc/dotstatsuite-visions';
+
+const Header = ({ target, ...props }) => (
+  <div {...(target ? { ref: target } : {})}>
+    <DataHeader {...props} />
+  </div>
+);
+
+export default Header;

package/src/viewer/src/index.jsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react';
+import * as R from 'ramda';
+import useSize from '@react-hook/size';
+import { Loading, NoData, TableHtml5 } from '@sis-cc/dotstatsuite-visions';
+import { makeStyles, useTheme } from '@mui/styles';
+import getChartOptions from './chartUtils/options.js';
+import Header from './header.jsx';
+import Chart from './chart.jsx';
+import Footer from './footer.jsx';
+import { isChartDataNotReady } from './utils.js';
+
+const useStyles = makeStyles(() => ({
+  container: {
+    borderColor: '#007bc7',
+    borderBottomWidth: 1,
+    borderLeftWidth: 0,
+    borderTopWidth: 1,
+    borderRightWidth: 0,
+    borderStyle: 'solid',
+    '& svg text::selection': {
+      background: 'none'
+    }
+  },
+  tableContainer: {
+    minWidth: '100%',
+    minHeight: '100%',
+    willChange: 'transform, opacity'
+  },
+  chartContainer: {
+    width: ({ fixedWidth }) => fixedWidth || '100%',
+    height: ({ fixedHeight }) => fixedHeight || '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  }
+}));
+
+const ViewContent = ({ loading, loadingProps = {}, type, width, errorMessage, ...rest }) => {
+  if (loading)
+    return <Loading message={loading} {...loadingProps} />;
+  if (errorMessage)
+    return <NoData message={errorMessage} />;
+
+  if (type === 'table') {
+    const tableProps = R.propOr({}, 'tableProps', rest);
+    const hasNoObs = R.pipe(R.prop('cells'), R.anyPass([R.isNil, R.isEmpty]))(tableProps);
+    if (hasNoObs) return <Loading />;
+
+    return <TableHtml5 isRtl={R.prop('isRtl', rest)} {...tableProps} />;
+  }
+  if (isChartDataNotReady({ data: R.prop('chartData', rest) }) || !width) {
+    return <Loading />;
+  }
+  return (
+    <Chart
+      data={R.prop('chartData', rest)}
+      getAxisOptions={R.prop('getAxisOptions', rest)}
+      heightOffsets={R.prop('heightOffsets', rest)}
+      options={R.prop('chartOptions', rest)}
+      type={type}
+      width={width}
+    />
+  );
+};
+
+const Viewer = ({ type, targets = {}, width, ...rest }) => {
+  const classes = useStyles({
+    fixedWidth: rest.fixedWidth,
+    fixedHeight: rest.fixedHeight
+  });
+
+  return (
+    <div
+      {...(targets.viewer ? { ref: targets.viewer } : {})}
+      className={R.join(' ')(
+        [classes.container,
+        type === 'table' ? classes.tableContainer : classes.chartContainer]
+      )}
+    >
+      <Header
+        target={targets.header}
+        {...R.propOr({}, 'headerProps', rest)}
+      />
+      <ViewContent type={type} width={width} {...rest} />
+      <Footer
+        width={width}
+        target={targets.footer}
+        type={type}
+        chartData={R.prop('chartData', rest)}
+        chartOptions={R.prop('chartOptions', rest)}
+        {...R.prop('footerProps', rest)}
+      />
+    </div>
+  );
+};
+
+const defaultChartHeight = chartOptions => R.pipe(
+  R.path(['base', 'height']),
+  h => (R.isNil(h) || isNaN(h)) ? 0 : h
+)(chartOptions);
+
+const ViewerWrapper = ({ chartOptions, type, getResponsiveSize, ...props }) => {
+  const theme = useTheme();
+  const viewerTarget = React.useRef(null);
+  const headerTarget = React.useRef(null);
+  const footerTarget = React.useRef(null);
+  const [viewerWidth, viewerHeight] = useSize(viewerTarget);
+  const [_, headerHeight] = useSize(headerTarget, { initialHeight: -1 });
+  const [___, footerHeight] = useSize(footerTarget, { initialHeight: -1 });
+  const [chartSvgHeight, setChartSvgHeight] = useState(0);
+  const defChartHeight = defaultChartHeight(chartOptions);
+
+  useEffect(() => {
+    if (R.is(Function, getResponsiveSize) && viewerWidth && headerHeight !== -1 && footerHeight !== -1) {
+      getResponsiveSize({
+        responsiveWidth: viewerWidth,
+        responsiveHeight: viewerHeight
+      });
+    }
+  }, [viewerWidth, viewerHeight]);
+
+  useEffect(() => {
+    if (headerHeight !== -1 && footerHeight !== -1 && !isNaN(headerHeight) && !isNaN(footerHeight)) {
+      const nextHeight = defChartHeight - headerHeight - footerHeight - 2;
+      setChartSvgHeight(nextHeight);
+    }
+  }, [headerHeight, footerHeight, defChartHeight]);
+
+
+  if (type === 'table') {
+    return <Viewer
+      {...props}
+      width={viewerWidth}
+      type={type}
+    />;
+  }
+
+  const preparedChartOptions = R.pipe(
+    R.over(R.lensPath(['base', 'width']), R.when(R.anyPass([R.isNil, isNaN]), R.always(viewerWidth || 0))),
+    R.set(R.lensPath(['base', 'height']), chartSvgHeight),
+    chartOptions => getChartOptions(chartOptions, props.chartData, type, theme, props.timeFormats, props.locale),
+  )(chartOptions);
+
+  return <Viewer
+    {...props}
+    type={type}
+    chartOptions={preparedChartOptions}
+    fixedWidth={R.path(['base', 'width'], chartOptions)}
+    fixedHeight={defChartHeight}
+    targets={{
+      viewer: viewerTarget,
+      header: headerTarget,
+      footer: footerTarget
+    }}
+    width={viewerWidth}
+  />;
+};
+
+export default ViewerWrapper;

package/src/viewer/src/legends/AxisLegend.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import * as R from 'ramda';
+import makeStyles from '@mui/styles/makeStyles';
+import { SCATTER } from '../../../rules/src/constants';
+import { getFontFromTheme } from '../utils';
+
+const useStyles = makeStyles(theme => {
+  const legendFont = getFontFromTheme(['axisLegend'])(theme);
+  return ({
+    xLegend: legendFont,
+    yLegend: {
+      ...legendFont,
+      left: 10,
+      position: 'absolute',
+      zIndex: 1,
+    }
+  })
+});
+
+const getAxisLabel = axis => R.pipe(
+  R.propOr([], 'series'),
+  R.head,
+  R.when(R.isNil, R.always({})),
+  R.path(['dimensionValues', axis, 'name'])
+);
+
+const AxisLegend = ({ axis, data, type }) => {
+  const classes = useStyles();
+  if (!R.equals(SCATTER, type))
+    return null;
+  switch (axis) {
+    case 'x':
+      return <span className={classes.xLegend}>→ {getAxisLabel('x')(data)}</span>;
+    case 'y':
+      return <span className={classes.yLegend}>↑ {getAxisLabel('y')(data)}</span>;
+    default:
+      return null;
+  }
+};
+
+export default AxisLegend;

package/src/viewer/src/legends/ChartLegends.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import * as R from 'ramda';
+import numeral from 'numeral';
+import { computeOptions } from '@sis-cc/dotstatsuite-d3-charts';
+import { ChoroplethLegend } from '../../../bridge-d3-react/src';
+import { useTheme } from '@mui/material/styles';
+import AxisLegend from './AxisLegend.jsx';
+import FocusLegend from './FocusLegend.jsx';
+import SeriesLegend from './SeriesLegend.jsx';
+import { CHORO } from '../../../rules/src/constants';
+import { getFontFromTheme, getOptionsFromFont } from '../utils';
+
+
+const ChoroLegend = ({ type, options, data }) => {
+  if (type !== CHORO) {
+    return null;
+  }
+  const theme = useTheme();
+  const fontOptions = R.pipe(getFontFromTheme(['mapLegend']), getOptionsFromFont)(theme);
+  const legendOptions = R.mergeDeepLeft(
+    options,
+    {
+      legend: {
+        choropleth: {
+          width: 300,
+          height: 30,
+          margin: { left: 15, right: 15 },
+          axis: {
+            thickness: 0,
+            orient: 'bottom',
+            font: fontOptions,
+            tick: {
+              size: 5,
+              thickness: 0
+            },
+            format: {
+              proc: d => numeral(d).format('0,0.[00]')
+            }
+          }
+        }
+      }
+    }
+  );
+
+  return (
+    <ChoroplethLegend options={legendOptions} data={data.series} />
+  );
+}
+
+const ChartLegends = ({ data, options, type, width }) => {
+  const engineOptions = R.pipe(
+    R.assocPath(['serie', 'stacked', 'layerSeries'], R.pathOr([], ['series', 0, 'layerSeries'], data)),
+    computeOptions
+  )(options);
+
+  return (
+    <div>
+      <AxisLegend axis="x" data={data} type={type} />
+      <FocusLegend data={data} options ={engineOptions} type={type} width={width} />
+      <SeriesLegend data={data} options={engineOptions} type={type} />
+      <ChoroLegend data={data} options={options} type={type} />
+    </div>
+  );
+};
+
+export default ChartLegends;

package/src/viewer/src/legends/FocusLegend.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import * as R from 'ramda';
+import Legend from './Legend.jsx';
+import { SCATTER, TIMELINE } from '../../../rules/src/constants';
+
+export const REDUCED_THRESHOLD = 160;
+
+const scatterRenderer = ({ color }) => (
+  <svg width='12' height='14'>
+    <circle cx='7' cy='7' r='4' stroke={color} fill={color} />
+  </svg>
+);
+
+const lineRenderer = ({ color }) => (
+  <svg width='12' height='14'>
+    <line x1='0' y1='7' x2='11' y2='7' stroke={color} strokeWidth='2' />
+  </svg>
+);
+
+const FocusLegend = ({ data, options, type, width }) => {
+  if (width < REDUCED_THRESHOLD) {
+    return null;
+  }
+
+  const itemRenderer = R.pipe(
+    R.when(R.always(type === SCATTER), R.always(scatterRenderer)),
+    R.when(R.always(type === TIMELINE), R.always(lineRenderer)),
+  )(null);
+
+  const getItemLabel = R.ifElse(
+    R.equals(SCATTER),
+    R.always(R.pipe(R.prop('label'), R.split(' - '), R.last)),
+    R.always(R.prop('label'))
+  )(type);
+
+  const items = R.pipe(
+    R.pathOr({}, ['share', 'focused']),
+    R.mapObjIndexed((selection, key) => {
+      if (R.isNil(selection)) {
+        return null;
+      }
+      const colors = R.pathOr([], ['serie', `${key}Colors`], options);
+      const nColors = R.length(colors);
+      return R.pipe(
+        R.addIndex(R.map)((entry, index) => {
+          if (entry.value === 'uniq-dp') {
+            return null;
+          }
+          const color = R.nth(index % nColors, colors);
+          return ({ color, label: getItemLabel(entry) });
+        }),
+        R.filter(R.identity)
+      )(selection);
+    }),
+    R.props(['baseline', 'highlight']),
+    R.filter(R.identity),
+    R.unnest
+  )(data)
+
+  return (<Legend items={items} itemRenderer={itemRenderer} />);
+}
+
+export default FocusLegend;

package/src/viewer/src/legends/Legend.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import * as R from 'ramda';
+import makeStyles from '@mui/styles/makeStyles';
+import { getFontFromTheme } from '../utils';
+
+const useStyles = makeStyles(theme => ({
+  legend: {
+    ...getFontFromTheme(['chartLegend'])(theme),
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+  },
+  entry: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginLeft: 10,
+  },
+  text: { marginLeft: 5 }
+}));
+
+const Legend = ({ items, itemRenderer }) => {
+  if (!R.is(Function, (itemRenderer)) || R.isNil(items) || R.isEmpty(items)) {
+    return null;
+  }
+
+  const classes = useStyles();
+
+  const legendEntries = R.addIndex(R.map)(
+    (entry, index) => {
+      const style = R.isNil(entry.color) ? {} : { color: entry.color };
+      return (
+        <div className={classes.entry} style={style}  key={index}>
+          {itemRenderer(entry)}
+          <div className={classes.text} >{R.prop('label', entry)}</div>
+        </div>
+      );
+    }
+  )(items);
+
+ return (<div className={classes.legend} >{legendEntries}</div>);
+};
+
+export default Legend;

package/src/viewer/src/legends/SeriesLegend.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import * as R from 'ramda';
+import Legend from './Legend.jsx';
+import { H_SYMBOL, STACKED_BAR, STACKED_ROW, V_SYMBOL } from '../../../rules/src/constants';
+
+const getSymbolSeriesItems = ({ data, options }) => {
+  const symbolMarkers = R.path(['serie', 'symbol', 'markers'], options);
+  const nMarkers = R.length(symbolMarkers);
+  const markerSize = Number(R.path(['serie', 'symbol', 'markerDefaultSize'], options));
+  const strokeWidth = R.path(['serie', 'symbol', 'markerDefaultStrokeWidth'], options);
+  const size = Math.round(Math.sqrt(markerSize)) + 8;
+  return R.pipe(
+    R.pathOr([], ['series', 0, 'symbolValues']),
+    R.addIndex(R.map)(
+      (label, serieIndex) => {
+        const marker = R.nth(serieIndex % nMarkers, symbolMarkers);
+        return ({
+          d: marker.path(markerSize),
+          transform: `translate(${size / 2}, ${size / 2}) rotate(${R.propOr(0, 'rotate', marker)})`,
+          style: R.pipe(
+            R.mergeRight({ strokeWidth }),
+            R.when(
+              s => s.fill !== s.stroke,
+              R.assoc('fill', 'white')
+            )
+          )(marker.style),
+          size,
+          label
+        })
+      }
+    )
+  )(data);
+};
+
+const getStackedSeriesItems = R.pipe(
+  R.pathOr([], ['options', 'serie', 'stacked', 'layerSeries']),
+  R.when(s => R.length(s) === 1, R.always([]))
+);
+
+const stackedLayerRenderer = ({ baseColor }) => (
+  <svg width="21" height="14">
+    <rect x='0' y='0' width='21' height='14' fill={baseColor} />
+  </svg>
+);
+
+const symbolRenderer = ({ d, size, style, transform }) => (
+  <svg width={size} height={size}>
+    <path
+      d={d}
+      transform={transform}
+      {...style}
+    />
+  </svg>
+);
+
+// stacked entries = [{ label, color }];
+
+const SeriesLegend = ({ data, options, type }) => {
+  const itemRenderer = R.pipe(
+    R.when(R.always(type === H_SYMBOL || type === V_SYMBOL), R.always(symbolRenderer)),
+    R.when(R.always(type === STACKED_BAR || type === STACKED_ROW), R.always(stackedLayerRenderer))
+  )(null);
+
+  if (R.isNil(itemRenderer)) {
+    return null;
+  }
+
+  const seriesItems = R.pipe(
+    R.when(R.always(type === H_SYMBOL || type === V_SYMBOL), getSymbolSeriesItems),
+    R.when(R.always(type === STACKED_BAR || type === STACKED_ROW), getStackedSeriesItems)
+  )({ data, options });
+
+  return (
+    <Legend items={seriesItems} itemRenderer={itemRenderer} />
+  );
+};
+
+export default SeriesLegend;

package/src/viewer/src/utils.js

@@ -0,0 +1,21 @@
+import * as R from 'ramda';
+
+export const isChartNoData = R.anyPass([
+  R.pipe(R.path(['data', 'series']), R.isEmpty),
+  R.allPass([
+    R.pipe(R.prop('type'), R.equals('ChoroplethChart'), R.not),
+    R.pipe(R.path(['data', 'series', 0, 'datapoints']), R.anyPass([R.isNil, R.isEmpty]))
+  ])
+]);
+
+export const isChartDataNotReady = R.pipe(R.path(['data', 'series']), R.isNil);
+
+export const getFontFromTheme = customPath => R.converge(
+  R.mergeRight,
+  [R.pathOr({}, ['mixins', 'chart', 'main']), R.pathOr({}, R.concat(['mixins', 'chart'], customPath))]
+);
+
+export const getOptionsFromFont = R.pipe(
+  R.props(['color', 'fontFamily', 'fontSize', 'fontWeight']),
+  ([color, family, size, weight]) => ({ color, size, family, weight })
+);