feat: add functions for parsing scales (apache-superset#207)

* feat: add more util functions

* feat: add unit test

* feat: define HasToString

* fix: unit test

* fix: update unit tests

* feat: add scale types

* feat: update scale parsing

* fix: enum

* feat: add color scale extraction

* refactor: create scale from config

* feat: parse more scales and add more test

* feat: add tests for band and point

* test: add more unit tests

* refactor: separate applyXXX into multiple files

* feat: parse nice time

* test: add unit tests

* test: make 100% coverage

* fix: complete coverage

* refactor: update type definitions

* fix: address comments

* fix: add comments for date parts

* fix: build issue

* fix: broken tests

Author: kristw

package.json

@@ -40,7 +40,7 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
-    "@superset-ui/build-config": "^0.1.1",
+    "@superset-ui/build-config": "^0.1.3",
     "@superset-ui/commit-config": "^0.0.9",
     "fast-glob": "^3.0.1",
     "fs-extra": "^8.0.1",
@@ -90,6 +90,11 @@
       ]
     },
     "typescript": {
+      "compilerOptions": {
+        "typeRoots": [
+          "../../node_modules/vega-lite/typings"
+        ]
+      },
       "include": [
         "./storybook/**/*"
       ]

packages/superset-ui-dimension/src/svg/updateTextNode.ts

@@ -30,13 +30,17 @@ export default function updateTextNode(
     textNode.setAttribute('class', className || '');
   }
 
-  // clear style
-  STYLE_FIELDS.forEach((field: keyof TextStyle) => {
-    textNode.style[field] = null;
-  });
+  // Clear style
+  // Note: multi-word property names are hyphenated and not camel-cased.
+  textNode.style.removeProperty('font');
+  textNode.style.removeProperty('font-weight');
+  textNode.style.removeProperty('font-style');
+  textNode.style.removeProperty('font-size');
+  textNode.style.removeProperty('font-family');
+  textNode.style.removeProperty('letter-spacing');
 
-  // apply new style
-  // Note that the font field will auto-populate other font fields when applicable.
+  // Apply new style
+  // Note: the font field will auto-populate other font fields when applicable.
   STYLE_FIELDS.filter(
     (field: keyof TextStyle) => typeof style[field] !== 'undefined' && style[field] !== null,
   ).forEach((field: keyof TextStyle) => {

packages/superset-ui-encodeable/package.json

@@ -28,10 +28,18 @@
   "private": true,
   "dependencies": {
     "lodash": "^4.17.15",
+    "@types/d3-scale": "^2.1.1",
+    "@types/d3-interpolate": "^1.3.1",
+    "@types/d3-time": "^1.0.10",
+    "d3-scale": "^3.0.1",
+    "d3-interpolate": "^1.3.2",
+    "d3-time": "^1.0.11",
     "vega": "^5.4.0",
+    "vega-expression": "^2.6.0",
     "vega-lite": "^3.4.0"
   },
   "peerDependencies": {
+    "@superset-ui/color": "^0.12.0",
     "@superset-ui/number-format": "^0.12.0",
     "@superset-ui/time-format": "^0.12.0"
   }

packages/superset-ui-encodeable/src/parsers/parseDateTime.ts

@@ -0,0 +1,31 @@
+import { parse, codegen } from 'vega-expression';
+import { dateTimeExpr } from 'vega-lite/build/src/datetime';
+import { DateTime } from '../types/VegaLite';
+
+export default function parseDateTime(dateTime: string | number | DateTime) {
+  if (typeof dateTime === 'number' || typeof dateTime === 'string') {
+    return new Date(dateTime);
+  }
+
+  const expression = dateTimeExpr(dateTime, true) as string;
+  const code = codegen({ globalvar: 'window' })(parse(expression)).code as string;
+  // Technically the "code" here is safe to eval(),
+  // but we will use more conservative approach and manually parse at the moment.
+  const isUtc = code.startsWith('Date.UTC');
+
+  const dateParts = code
+    .replace(/^(Date[.]UTC|new[ ]Date)\(/, '')
+    .replace(/\)$/, '')
+    .split(',')
+    .map((chunk: string) => Number(chunk.trim())) as [
+    number, // year
+    number, // month
+    number, // date
+    number, // hours
+    number, // minutes
+    number, // seconds
+    number, // milliseconds
+  ];
+
+  return isUtc ? new Date(Date.UTC(...dateParts)) : new Date(...dateParts);
+}

packages/superset-ui-encodeable/src/parsers/scale/applyAlign.ts

@@ -0,0 +1,11 @@
+import { Value } from '../../types/VegaLite';
+import { ScaleConfig, D3Scale } from '../../types/Scale';
+
+export default function applyAlign<Output extends Value>(
+  config: ScaleConfig<Output>,
+  scale: D3Scale<Output>,
+) {
+  if ('align' in config && typeof config.align !== 'undefined' && 'align' in scale) {
+    scale.align(config.align);
+  }
+}

packages/superset-ui-encodeable/src/parsers/scale/applyClamp.ts

@@ -0,0 +1,11 @@
+import { Value } from '../../types/VegaLite';
+import { ScaleConfig, D3Scale } from '../../types/Scale';
+
+export default function applyClamp<Output extends Value>(
+  config: ScaleConfig<Output>,
+  scale: D3Scale<Output>,
+) {
+  if ('clamp' in config && typeof config.clamp !== 'undefined' && 'clamp' in scale) {
+    scale.clamp(config.clamp);
+  }
+}

packages/superset-ui-encodeable/src/parsers/scale/applyDomain.ts

@@ -0,0 +1,21 @@
+import { Value } from '../../types/VegaLite';
+import { ScaleConfig, D3Scale, TimeScaleConfig } from '../../types/Scale';
+import parseDateTime from '../parseDateTime';
+import inferElementTypeFromUnionOfArrayTypes from '../../utils/inferElementTypeFromUnionOfArrayTypes';
+import { isTimeScale } from '../../typeGuards/Scale';
+
+export default function applyDomain<Output extends Value>(
+  config: ScaleConfig<Output>,
+  scale: D3Scale<Output>,
+) {
+  const { domain, reverse, type } = config;
+  if (typeof domain !== 'undefined') {
+    const processedDomain = reverse ? domain.slice().reverse() : domain;
+    if (isTimeScale(scale, type)) {
+      const timeDomain = processedDomain as TimeScaleConfig['domain'];
+      scale.domain(inferElementTypeFromUnionOfArrayTypes(timeDomain).map(d => parseDateTime(d)));
+    } else {
+      scale.domain(processedDomain);
+    }
+  }
+}

packages/superset-ui-encodeable/src/parsers/scale/applyInterpolate.ts

@@ -0,0 +1,16 @@
+import { Value } from '../../types/VegaLite';
+import { ScaleConfig, D3Scale } from '../../types/Scale';
+
+export default function applyInterpolate<Output extends Value>(
+  config: ScaleConfig<Output>,
+  scale: D3Scale<Output>,
+) {
+  if (
+    'interpolate' in config &&
+    typeof config.interpolate !== 'undefined' &&
+    'interpolate' in scale
+  ) {
+    // TODO: Need to convert interpolate string into interpolate function
+    throw new Error('"scale.interpolate" is not supported yet.');
+  }
+}

packages/superset-ui-encodeable/src/parsers/scale/applyNice.ts

@@ -0,0 +1,77 @@
+import {
+  timeSecond,
+  timeMinute,
+  timeHour,
+  timeDay,
+  timeYear,
+  timeMonth,
+  timeWeek,
+  utcSecond,
+  utcMinute,
+  utcHour,
+  utcDay,
+  utcWeek,
+  utcMonth,
+  utcYear,
+  CountableTimeInterval,
+} from 'd3-time';
+import { ScaleTime } from 'd3-scale';
+import { Value, ScaleType, NiceTime } from '../../types/VegaLite';
+import { ScaleConfig, D3Scale } from '../../types/Scale';
+
+const localTimeIntervals: {
+  [key in NiceTime]: CountableTimeInterval;
+} = {
+  day: timeDay,
+  hour: timeHour,
+  minute: timeMinute,
+  month: timeMonth,
+  second: timeSecond,
+  week: timeWeek,
+  year: timeYear,
+};
+
+const utcIntervals: {
+  [key in NiceTime]: CountableTimeInterval;
+} = {
+  day: utcDay,
+  hour: utcHour,
+  minute: utcMinute,
+  month: utcMonth,
+  second: utcSecond,
+  week: utcWeek,
+  year: utcYear,
+};
+
+// eslint-disable-next-line complexity
+export default function applyNice<Output extends Value>(
+  config: ScaleConfig<Output>,
+  scale: D3Scale<Output>,
+) {
+  if ('nice' in config && typeof config.nice !== 'undefined' && 'nice' in scale) {
+    const { nice } = config;
+    if (typeof nice === 'boolean') {
+      if (nice === true) {
+        scale.nice();
+      }
+    } else if (typeof nice === 'number') {
+      scale.nice(nice);
+    } else {
+      const timeScale = scale as ScaleTime<Output, Output>;
+      const { type } = config;
+      if (typeof nice === 'string') {
+        timeScale.nice(type === ScaleType.UTC ? utcIntervals[nice] : localTimeIntervals[nice]);
+      } else {
+        const { interval, step } = nice;
+        const parsedInterval = (type === ScaleType.UTC
+          ? utcIntervals[interval]
+          : localTimeIntervals[interval]
+        ).every(step);
+
+        if (parsedInterval !== null) {
+          timeScale.nice(parsedInterval as CountableTimeInterval);
+        }
+      }
+    }
+  }
+}

packages/superset-ui-encodeable/src/parsers/scale/applyPadding.ts

@@ -0,0 +1,27 @@
+import { Value } from '../../types/VegaLite';
+import { ScaleConfig, D3Scale } from '../../types/Scale';
+
+export default function applyPadding<Output extends Value>(
+  config: ScaleConfig<Output>,
+  scale: D3Scale<Output>,
+) {
+  if ('padding' in config && typeof config.padding !== 'undefined' && 'padding' in scale) {
+    scale.padding(config.padding);
+  }
+
+  if (
+    'paddingInner' in config &&
+    typeof config.paddingInner !== 'undefined' &&
+    'paddingInner' in scale
+  ) {
+    scale.paddingInner(config.paddingInner);
+  }
+
+  if (
+    'paddingOuter' in config &&
+    typeof config.paddingOuter !== 'undefined' &&
+    'paddingOuter' in scale
+  ) {
+    scale.paddingOuter(config.paddingOuter);
+  }
+}