@sis-cc/dotstatsuite-components 21.0.1 → 21.1.0

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

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

@@ -1,51 +0,0 @@
-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.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-import { DataFooter } from '@sis-cc/dotstatsuite-visions';
-import ChartLegends from './legends/ChartLegends';
-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.js

@@ -1,10 +0,0 @@
-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.js

@@ -1,158 +0,0 @@
-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';
-import Header from './header';
-import Chart from './chart';
-import Footer from './footer';
-import { isChartDataNotReady } from './utils';
-
-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={[
-        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.js

@@ -1,41 +0,0 @@
-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.js

@@ -1,66 +0,0 @@
-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';
-import FocusLegend from './FocusLegend';
-import SeriesLegend from './SeriesLegend';
-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.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-import Legend from './Legend';
-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.js

@@ -1,46 +0,0 @@
-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.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-import Legend from './Legend';
-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

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