@sis-cc/dotstatsuite-components 22.0.1 → 22.0.2

package/src/rules/src/chart/getTooltipOptions.js

@@ -0,0 +1,230 @@
+import * as R from 'ramda';
+import numeral from 'numeral';
+import { format } from 'date-fns';
+import {
+  BAR,
+  CHORO,
+  H_SYMBOL,
+  ROW,
+  SCATTER,
+  STACKED_BAR,
+  STACKED_ROW,
+  TIMELINE,
+  V_SYMBOL
+} from '../constants';
+import { getTimeProc } from './getAxisOptions';
+
+export const getTooltipOptions =  (data, type, options, fonts={}, timeFormats={}, locale) => {
+  const primaryFonts = (color) => (`
+    font-size: ${R.pathOr(12, ['primary', 'fontSize'], fonts)}px;
+    font-family: ${R.pathOr('inherit', ['primary', 'fontFamily'], fonts)};
+    font-weight: ${R.pathOr('normal', ['primary', 'fontWeight'], fonts)};
+    color: ${color};
+    padding: 5px;
+    border: 1px solid ${color};
+    background: white;
+    opacity: .8;
+  `);
+
+  const secondaryFonts = `
+    font-family: ${R.pathOr('inherit', ['secondary', 'fontFamily'], fonts)};
+    font-size: ${R.pathOr(12, ['secondary', 'fontSize'], fonts)}px;
+    font-weight: ${R.pathOr('normal', ['secondary', 'fontWeight'], fonts)};
+  `;
+
+  const valueFormatter = d => numeral(d).format('0,0.[00]');
+
+  const timeFormatter = R.pipe(
+    R.prop('frequency'),
+    freq => getTimeProc(freq, timeFormats, locale),
+    R.when(
+      R.anyPass([R.isNil, R.complement(R.is)(Function)]),
+      R.always(date => format(date, 'MMM YY'))
+    )
+  )(data);
+
+  return R.pipe(
+    R.pathOr({}, ['serie', 'tooltip']),
+    R.cond([
+      [
+        R.always(R.equals(BAR, type)),
+        R.mergeRight({
+          layout: (serie, datum, color) => (`
+            <div style="${primaryFonts(color)}">
+              <div style="text-align: right;">
+                ${datum.x}
+              </div>
+              <div style="text-align: right; ${secondaryFonts}">
+                ${datum.formatedValue || valueFormatter(datum.y)}
+              </div>
+            </div>
+          `)
+        })
+      ],
+      [
+        R.always(R.equals(ROW, type)),
+        R.mergeRight({
+          layout: (serie, datum, color) => (`
+            <div style="${primaryFonts(color)}">
+              <div style="text-align: right;">
+                ${datum.y}
+              </div>
+              <div style="text-align: right; ${secondaryFonts}">
+                ${datum.formatedValue || valueFormatter(datum.x)}
+              </div>
+            <div>
+          `)
+        })
+      ],
+      [
+        R.always(R.equals(SCATTER, type)),
+        R.mergeRight({
+          layout: (serie, datum, color) => (`
+            <div style="${primaryFonts(color)}">
+              <div style="text-align: right;">
+                ${R.pipe(R.propOr({}, 'dimensionValues'), R.values, R.pluck('name'), R.join(' '))(datum)}
+              </div>
+              <div style="text-align: right;">
+                ${R.path(['dimensionValues', 'x', 'name'], serie)}
+                <span style="${secondaryFonts}">
+                  ${datum.xFormat || valueFormatter(datum.x)}
+                </span>
+              </div>
+              <div style="text-align: right;">
+                ${R.path(['dimensionValues', 'y', 'name'], serie)}
+                <span style="${secondaryFonts}">
+                  ${datum.yFormat || valueFormatter(datum.y)}
+                </span>
+              </div>
+            </div>
+          `)
+        })
+      ],
+      [
+        R.always(R.equals(TIMELINE, type)),
+        R.mergeRight({
+          layout: (serie, datum, color) => (`
+            <div style="${primaryFonts(color)}">
+              <div style="text-align: right;">
+                ${R.pipe(R.propOr({}, 'dimensionValues'), R.values, R.pluck('name'), R.join('<br />'))(datum)}
+              </div>
+              <div style="text-align: right;">
+                ${datum.timeLabel}
+              </div>
+              <div style="text-align: right; ${secondaryFonts}">
+                ${datum.formatedValue || valueFormatter(datum.y)}
+              </div>
+            </div>
+          `)
+        })
+      ],
+      [
+        R.always(R.equals(H_SYMBOL, type)),
+        R.mergeRight({
+            layout: (serie, datum, color) => (`
+              <div style="${primaryFonts(color)}">
+                <div style="text-align: right;">
+                  ${datum.y}
+                  <br />
+                  ${datum.symbolValue}
+                </div>
+                <div style="text-align: right; ${secondaryFonts}">
+                  ${datum.formatedValue || valueFormatter(datum.x)}
+                </div>
+              </div>
+            `)
+          })
+      ],
+      [
+        R.always(R.equals(V_SYMBOL, type)),
+        R.mergeRight({
+          layout: (serie, datum, color) => (`
+            <div style="${primaryFonts(color)}">
+              <div style="text-align: right;">
+                ${datum.x}
+                <br />
+                ${datum.symbolValue}
+              </div>
+              <div style="text-align: right; ${secondaryFonts}">
+                ${datum.formatedValue || valueFormatter(datum.y)}
+              </div>
+            </div>
+          `)
+        })
+      ],
+      [
+        R.always(R.equals(STACKED_BAR, type)),
+        R.mergeRight({
+          layout: (serie, datum, color) => (`
+            <div style="${primaryFonts(color)}">
+              <div style="text-align: right;">
+                ${datum.x}
+              </div>
+              <div style="text-align: right;">
+                ${datum.layerLabel}
+              </div>
+              <div style="text-align: right; font-size: ${R.pathOr(12, ['secondary', 'fontSize'], fonts)}px;">
+                Value:
+                <span style="${secondaryFonts}">
+                  ${R.is(Function, datum.formater) ? datum.formater(datum.height) : valueFormatter(datum.height)}
+                </span>
+              </div>
+              <div style="text-align: right; font-size: ${R.pathOr(12, ['secondary', 'fontSize'], fonts)}px;">
+                Cumulated:
+                <span style="${secondaryFonts}">
+                  ${R.is(Function, datum.formater) ? datum.formater(datum.y) : valueFormatter(datum.y)}
+                </span>
+              </div>
+            </div>
+          `)
+        })
+      ],
+      [
+        R.always(R.equals(STACKED_ROW, type)),
+        R.mergeRight({
+          layout: (serie, datum, color) => (`
+            <div style="${primaryFonts(color)}">
+              <div style="text-align: right;">
+                ${datum.y}
+              </div>
+              <div style="text-align: right;">
+                ${datum.layerLabel}
+              </div>
+              <div style="text-align: right; font-size: ${R.pathOr(12, ['secondary', 'fontSize'], fonts)}px;">
+                Value:
+                <span style="${secondaryFonts}">
+                  ${R.is(Function, datum.formater) ? datum.formater(datum.width) : valueFormatter(datum.width)}
+                </span>
+              </div>
+              <div style="text-align: right; font-size: ${R.pathOr(12, ['secondary', 'fontSize'], fonts)}px;">
+                Cumulated:
+                <span style="${secondaryFonts}">
+                  ${R.is(Function, datum.formater) ? datum.formater(datum.x) : valueFormatter(datum.x)}
+                </span>
+              </div>
+            </div>
+          `)
+        })
+      ],
+      [
+        R.always(R.equals(CHORO, type)),
+        R.mergeRight({
+          layout: (serie, datum, color) => (`
+            <div style="${primaryFonts(color)}">
+              <div style="text-align: right;">
+                ${R.pathOr('', ['properties', 'label'], datum)}
+              </div>
+              <div style="text-align: right;">
+                ${R.pathOr('', ['properties', 'category'], datum)}
+              </div>
+              <div style="text-align: right; ${secondaryFonts}">
+                ${R.pipe(R.pathOr(null, ['properties', 'value']), valueFormatter)(datum)}
+              </div>
+            </div>
+          `)
+        })
+      ],
+      [R.T, R.identity]
+    ])
+  )(options);
+};

package/src/rules/src/constants.js

@@ -0,0 +1,64 @@
+export const BAR = 'BarChart';
+export const ROW = 'RowChart';
+export const SCATTER = 'ScatterChart';
+export const TIMELINE = 'TimelineChart';
+export const H_SYMBOL = 'HorizontalSymbolChart';
+export const V_SYMBOL = 'VerticalSymbolChart';
+export const STACKED_BAR = 'StackedBarChart';
+export const STACKED_ROW = 'StackedRowChart';
+export const CHORO = 'ChoroplethChart';
+export const PERCENT = 'percent';
+export const VALUES = 'values';
+export const TYPES = {
+  [BAR]: BAR,
+  [ROW]: ROW,
+  [SCATTER]: SCATTER,
+  [TIMELINE]: TIMELINE,
+  [H_SYMBOL]: H_SYMBOL,
+  [V_SYMBOL]: V_SYMBOL,
+  [STACKED_BAR]: STACKED_BAR,
+  [STACKED_ROW]: STACKED_ROW,
+  [CHORO]: CHORO,
+};
+export const FREQ_A = 'annual';
+export const FREQ_S = 'semesterly';
+export const FREQ_Q = 'quarterly';
+export const FREQ_M = 'monthly';
+export const DEFAULT_UPR_IDS = {
+  U: ['UNIT', 'UNIT_MEASURE', 'UNIT_MEAS', 'UNITS'],
+  P: ['UNIT_MULT', 'POWERCODE', 'POWER', 'MAGNITUDE', 'SCALE'],
+  R: ['REF_PERIOD', 'REFERENCEPERIOD', 'BASE_PER']
+};
+
+export const DEFAULT_REJECTED_UPR_VALUES_IDS = {
+  U: [],
+  P: ['0'],
+  R: []
+};
+
+export const DEFAULT_REJECTED_SUBTITLE_IDS = ['_L', '_T', '_Z'];
+
+export const DIMENSION_DISPLAY_PARTS = {
+  DESCRIPTION: 'description',
+  CODE: 'code',
+  BOTH: 'both',
+};
+
+export const DEFAULT_MAJOR_ATTRIBUTES = {
+  DECIMALS: {
+    ID: 'DECIMALS',
+    ROLE: 'DECIMALS'
+  },
+  SCALE: {
+    ID: 'SCALE'
+  }
+};
+
+export const V8_SDMX_JSON = "application/vnd.sdmx.data+json;version=1.0.0-wd";
+
+export const OBS_TYPE_NUMBER = 'OBS_TYPE_NUMBER';
+export const OBS_TYPE_NUMERICAL_STRING = 'OBS_TYPE_NUMERICAL_STRING';
+export const OBS_TYPE_STRING = 'OBS_TYPE_STRING';
+export const REPORTING_YEAR_START_DAY = 'REPORTING_YEAR_START_DAY';
+export const REPYEARSTART = 'REPYEARSTART';
+

package/src/rules/src/date.js

@@ -0,0 +1,118 @@
+import * as R from 'ramda';
+import dateFns from 'date-fns';
+import fr from 'date-fns/locale/fr';
+import de from 'date-fns/locale/de';
+import en from 'date-fns/locale/en';
+import es from 'date-fns/locale/es';
+import ar from 'date-fns/locale/ar';
+import it from 'date-fns/locale/it';
+import nl from 'date-fns/locale/nl';
+import th from 'date-fns/locale/th';
+
+const isValidDate = period =>
+  R.and(dateFns.isDate, date => R.not(R.equals(date.getTime(date), NaN)))(new Date(period));
+
+export const dateWithoutTZ = date => dateFns.addMinutes(date, date.getTimezoneOffset());
+
+export const getLocale = R.cond([
+  [R.equals('fr'), R.always(fr)],
+  [R.equals('de'), R.always(de)],
+  [R.equals('es'), R.always(es)],
+  [R.equals('ar'), R.always(ar)],
+  [R.equals('it'), R.always(it)],
+  [R.equals('nl'), R.always(nl)],
+  [R.equals('th'), R.always(th)],
+  [R.T, R.always(en)]
+]);
+
+const formaterPeriod = (locale, format) => date => dateFns.format(date, format, { locale: getLocale(locale) });
+
+export const getReportedTimePeriodLabel = (freq, _format, locale) => (reportYearStart, { id, start, reportedStart }) => {
+  const year = dateFns.getYear(start);
+  const reportStartDate = new Date(year, reportYearStart.month, reportYearStart.day);
+  const isReportFirstDate = dateFns.isEqual(reportStartDate, new Date(year, 1, 1));
+  if (isReportFirstDate || freq === 'D') {
+    return R.isNil(_format) || freq !== 'M'
+      ? id : dateFns.format(start, _format, { locale: getLocale(locale) });
+  }
+  const nextYear = year + 1;
+  if (freq === 'A') {
+    return `${year}/${nextYear}`;
+  }
+  if (freq === 'S') {
+    const [semester] = R.match(/S\d/, id);
+    return `${year}/${nextYear}-${semester}`;
+  }
+  if (freq === 'Q') {
+    const [quarter] = R.match(/Q\d/, id);
+    return `${year}/${nextYear}-${quarter}`;
+  }
+  if (freq === 'M') {
+    const isFirstDayOfMonth = dateFns.isFirstDayOfMonth(reportedStart);
+    if (isFirstDayOfMonth) {
+      return R.isNil(_format) ? id : dateFns.format(reportedStart, _format, { locale: getLocale(locale) });
+    }
+    const [month] = R.match(/M[\d]{2}/, id);
+    return `${year}/${nextYear}-${month}`;
+  }
+  const [week] = R.match(/W[\d]{2}/, id)
+  return `${year}/${nextYear}-${week}`;
+};
+
+export const getReportedTimePeriod = (reportYearStart, value, freq) => {
+  let start = new Date(R.prop('start', value));
+  let end = dateWithoutTZ(new Date(R.prop('end', value)));
+  if(reportYearStart.month === '01' && reportYearStart.day === '01') {
+    return ({ start, end });
+  }
+  start = dateFns.addMonths(start, reportYearStart.month - 1);
+  start = dateFns.addDays(start, reportYearStart.day - 1);
+  if (freq === 'A') {
+    end = dateFns.addYears(start, 1);
+  }
+  if (freq === 'S') {
+    end = dateFns.addMonths(start, 6);
+  }
+  if (freq === 'Q') {
+    end = dateFns.addMonths(start, 3);
+  }
+  if (freq === 'M') {
+    end = dateFns.addMonths(start, 6);
+  }
+  if (freq === 'W' || freq === 'B') {
+    end = dateFns.addDays(start, 7);
+  }
+  if (freq === 'D') {
+    end = dateFns.addDays(start, 1);
+  }
+  if (freq === 'H') {
+    end = dateFns.addHours(start, 1);
+  }
+  if (freq === 'N') {
+    end = dateFns.addMinutes(start, 1);
+  }
+  end = dateFns.subSeconds(end, 1);
+  return ({ start, end });
+};
+
+export const getReportedTimePeriodNote = (reportYearStart, start, end, freq) => {
+  if(reportYearStart.month === '01' && reportYearStart.day === '01') {
+    return null;
+  } 
+  if (R.includes(freq, ['D', 'H', 'N'])) {
+    return null;
+  }
+  const isFirstDayOfMonth = dateFns.isFirstDayOfMonth(start);
+  if (freq === 'M' && isFirstDayOfMonth) {
+    return null;
+  }
+  const formatedStart = dateFns.format(start, 'YYYY-MM-DD');
+  const formatedEnd = dateFns.format(end, 'YYYY-MM-DD');
+  return ({ value: { name: `${formatedStart} - ${formatedEnd}` } });
+};
+
+
+export const getTimePeriodLabel = (locale, format = 'YYYY MMM') => R.pipe(
+  R.when(R.isNil, R.always('')),
+  R.when(isValidDate, formaterPeriod(locale, format)),
+);

package/src/rules/src/dimension-utils.js

@@ -0,0 +1,54 @@
+import { isEmpty, isNil, get, has, reduce } from 'lodash';
+
+export const dimensionValueDisplay =
+  (display, accessors = {}) =>
+  (dimensionValue) => {
+    const id = get(dimensionValue, accessors.id || 'id', '');
+    const name = get(dimensionValue, accessors.name || 'name', '');
+    // a non-coded component (dim | attr) has no name, names nor label
+    // the only valid thing to display is the id
+    if (get(dimensionValue, 'isNonCoded', false)) return id;
+    //auto-generated flags have no id nor name
+    if (isEmpty(id) && isEmpty(name)) return ''
+    switch (display) {
+      case 'label':
+        return isEmpty(name) ? `[${id}]` : name;
+      case 'code':
+        return id;
+      case 'both':
+        if (isNil(id) || isEmpty(id)) return name;
+        return `(${id}) ${name}`;
+      default:
+        return null;
+    }
+  };
+
+export const dimensionValueDisplayAt = (dimension, index, display) => {
+  const dimensionValue = get(dimension, `values[${Number(index)}]`, {});
+  return dimensionValueDisplay(display)(dimensionValue);
+};
+
+export const categoryDisplay = (
+  splitObservationKey,
+  dimensions,
+  dimensionsWithValuesIndexedById,
+  rejectedId,
+  display,
+) => {
+  return reduce(
+    splitObservationKey,
+    (memo, dimensionValueIndex, dimensionIndex) => {
+      const dimension = get(dimensions, `[${dimensionIndex}]`, {});
+      if (
+        has(dimensionsWithValuesIndexedById, dimension.id) &&
+        dimension.id !== rejectedId
+      ) {
+        memo.push(
+          dimensionValueDisplayAt(dimension, dimensionValueIndex, display),
+        );
+      }
+      return memo;
+    },
+    [],
+  ).join(' - ');
+};

package/src/rules/src/factories/choro-series.js

@@ -0,0 +1,65 @@
+import { get, has, head, isUndefined, map, split, transform } from 'lodash';
+import { getRefAreaDimension } from '@sis-cc/dotstatsuite-sdmxjs';
+import { categoryDisplay, dimensionValueDisplay } from '../dimension-utils';
+
+const parseByAreas = (observations, refAreaDimension) => {
+  if (isUndefined(refAreaDimension)) {
+    return null;
+  }
+  const refAreaDimIndex = get(refAreaDimension, 'index');
+  const refAreaValues = refAreaDimension.values;
+
+  return transform(
+    observations,
+    (acc, value, key) => {
+      const splitedKey = split(key, ':');
+      const areaValueIndex = get(splitedKey, `[${refAreaDimIndex}]`, null);
+      const areaValue = get(refAreaValues, `[${areaValueIndex}]`, null);
+      const areaId = get(areaValue, 'id', null);
+      if (!has(acc, areaId)) {
+        acc[areaId] = [];
+      }
+      acc[areaId].push({ splitedKey, value, areaValueIndex });
+    },
+    {}
+  );
+};
+
+export default ({ observations, dimensions }, dimensionsWithValuesIndexedById, topoMap, display) => {
+  const refAreaDimension = getRefAreaDimension({ dimensions });
+  const observationsByAreas = parseByAreas(observations, refAreaDimension);
+  const topology = get(topoMap, 'topology', {});
+  const areaSelection = get(topoMap, 'areaSelection', null);
+  const topoAreas = get(topology, `objects.${areaSelection}`, null);
+  if (!observationsByAreas || !topoAreas) {
+    return null;
+  }
+  const topoAreasWithData = map(
+    topoAreas.geometries,
+    (areaGeometry) => {
+      const areaObservation = head(get(observationsByAreas, get(areaGeometry, 'properties.id', null), []));
+      const areaValueIndex = get(areaObservation, 'areaValueIndex', null);
+      const areaValue = get(refAreaDimension, `values[${areaValueIndex}]`, null);
+      return {
+        ...areaGeometry,
+        properties: {
+          ...get(areaGeometry, 'properties', {}),
+          label: dimensionValueDisplay(display)(areaValue),
+          value: head(get(areaObservation, 'value', [])),
+          category: categoryDisplay(get(areaObservation, 'splitedKey', null), dimensions, dimensionsWithValuesIndexedById, refAreaDimension.id, display),
+        }
+      };
+    }
+  );
+  return ({
+    objects: {
+      areas: {
+        type: topoAreas.type,
+        geometries: topoAreasWithData
+      }
+    },
+    arcs: topology.arcs,
+    bbox: topology.bbox,
+    transform: topology.transform
+  });
+}

package/src/rules/src/factories/sample-focus.js

@@ -0,0 +1,22 @@
+import { map, each, get, omit, isArray, keys, head } from 'lodash';
+
+export default function focus(series, focusSelections) {
+  const serie = head(series);
+  const datapoints = get(serie, 'datapoints', []);
+
+  const _datapoints = map(datapoints, (datapoint) => {
+    let _datapoint = omit(datapoint, map(keys(focusSelections), focusKey => `${focusKey}Index`));
+    
+    each(focusSelections, (focusSelection, focusKey) => {
+      const _focusKey = `${focusKey}Index`;
+
+      each(isArray(focusSelection) ? focusSelection : [focusSelection], (focus, index) => {
+        if (get(focus, 'value') === _datapoint.key) _datapoint[_focusKey] = index;
+      });
+    });
+
+    return _datapoint;
+  });
+
+  return [{ ...serie, datapoints: _datapoints }];
+}

package/src/rules/src/factories/sample-series.js

@@ -0,0 +1,50 @@
+import { map, sortBy, head, isEmpty, isNil, split } from 'lodash';
+import { categoryDisplay } from '../dimension-utils';
+
+export const getDatapoints = (
+  keys, observations, dimensions, dimensionsWithValuesIndexedById, sortDirection, display, formaterAttrs, getFormatedObservation,
+) => {
+  const [categoryKey, valueKey] = keys;
+  const sortFunc =  dp => dp[valueKey] * sortDirection;
+
+  return sortBy(
+    map(
+      observations,
+      (observationValue, observationKey) => {
+        const value = head(observationValue);
+        const category = categoryDisplay(split(observationKey, ':'), dimensions, dimensionsWithValuesIndexedById, null, display);
+        const categoryIds = categoryDisplay(split(observationKey, ':'), dimensions, dimensionsWithValuesIndexedById, null, 'code');
+        const formatedValue = getFormatedObservation(observationValue, formaterAttrs);
+
+        let key = categoryIds;
+        if (isNil(key) || isEmpty(key)) {
+          key = 'uniq-dp';
+        }
+
+        return { value, category, [valueKey]: value, [categoryKey]: category, key, formatedValue };
+      }
+    ),
+    sortFunc
+  );
+};
+
+export const series = (
+  keys, observations, dimensions, dimensionsWithValuesIndexedById, sortDirection, display, formaterAttrs, getFormatedObservation
+) => {
+  return [{
+    datapoints: getDatapoints(
+      keys, observations, dimensions, dimensionsWithValuesIndexedById, sortDirection, display, formaterAttrs, getFormatedObservation
+    )
+  }]
+};
+
+export default (chartType, { observations, dimensions }, dimensionsWithValuesIndexedById, display, formaterAttrs, getFormatedObservation) => {
+  switch(chartType) {
+    case 'BarChart':
+      return series(['x', 'y'], observations, dimensions, dimensionsWithValuesIndexedById, 1, display, formaterAttrs, getFormatedObservation);
+    case 'RowChart':
+      return series(['y', 'x'], observations, dimensions, dimensionsWithValuesIndexedById, -1, display, formaterAttrs, getFormatedObservation);
+    default:
+      return [];
+  }
+};

package/src/rules/src/factories/scatter-dimension.js

@@ -0,0 +1,32 @@
+import * as R from 'ramda';
+import { isRefAreaDimension } from '@sis-cc/dotstatsuite-sdmxjs';
+
+export default (dimensions, { id, xId, yId }) => {
+  if (R.isEmpty(dimensions))
+    return;
+
+  let chartDimension;
+  if (!R.isNil(id))
+    chartDimension = R.find(R.propEq('id', id), dimensions);
+
+  if (R.isNil(chartDimension)) {
+    const _dimensions = R.reject(isRefAreaDimension, dimensions);
+    chartDimension = R.head(R.isEmpty(_dimensions) ? dimensions : _dimensions);
+  }
+
+  const chartDimensionId = R.prop('id', chartDimension || {});
+  const values = R.propOr([], 'values', chartDimension || {});
+
+  const xValue = R.find(R.propEq('id', xId), values);
+  const yValue = R.find(v => R.propEq('id', yId, v) && v.id !== xId, values);
+  //if same xId & yId provided, xId is taken in account
+  const _xId = R.isNil(xValue)
+    ? R.pipe(R.reject(R.propEq('id', R.prop('id', yValue || {}))), R.head, R.prop('id'))(values) : xValue.id;
+  const _yId = R.isNil(yValue) ? R.pipe(R.find(v => v.id !== _xId), R.prop('id'))(values) : yValue.id;
+
+  return {
+    id: chartDimensionId,
+    xId: _xId,
+    yId: _yId,
+  };
+};

package/src/rules/src/factories/scatter-focus.js

@@ -0,0 +1,39 @@
+import { map, each, omit, get, split, reduce, isEmpty, keys } from 'lodash';
+
+export default function focus(series, focusSelections) {
+  // scatter has only 1 serie
+  const serie = get(series, '[0]', {});
+
+  const _focusSelections = reduce(
+    focusSelections,
+    (memo, focusSelection, focusKey) => {
+      if (!isEmpty(focusSelection)) memo[focusKey] = focusSelection;
+      return memo;
+    },
+    {}
+  );
+
+  if (isEmpty(_focusSelections)) return series;
+
+  const datapoints = get(serie, 'datapoints', []);
+
+  let _datapoints = map(datapoints, (datapoint) => (
+    omit(datapoint, map(keys(focusSelections), focusKey => `${focusKey}Index`))
+  ));
+
+  const __datapoints = map(_datapoints, (datapoint) => {
+    each(_focusSelections, (focusSelection, focusKey) => {
+      const _focusKey = `${focusKey}Index`;
+
+      each(focusSelection, (focus, i) => {
+        const _focus = get(focus, 'options', {});
+        const dimensionValueId = get(datapoint, `dimensionValues.${_focus.dimensionId}.id`);
+        if (dimensionValueId === _focus.dimensionValueId) datapoint[_focusKey] = i;
+      });
+    });
+
+    return datapoint;
+  });
+
+  return [{ ...serie, datapoints: __datapoints }];
+}