@unovis/ts 1.1.1-beta.6 → 1.1.1-beta.7

package/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/index.ts

@@ -0,0 +1 @@
+export * from './lib'

package/licences.txt

@@ -0,0 +1,43 @@
+name                               license period  license type  installed version  author
+----                               --------------  ------------  -----------------  ------
+@emotion/css                       perpetual       MIT           11.7.1             Kye Hohenberger
+@juggle/resize-observer            perpetual       Apache-2.0    3.3.1              Juggle
+@types/d3                          perpetual       MIT           7.4.0              n/a
+@types/d3-collection               perpetual       MIT           1.0.10             n/a
+@types/d3-sankey                   perpetual       MIT           0.11.2             n/a
+@types/geojson                     perpetual       MIT           7946.0.8           n/a
+@types/leaflet                     perpetual       MIT           1.7.6              n/a
+@types/supercluster                perpetual       MIT           5.0.2              n/a
+@types/three                       perpetual       MIT           0.135.0            n/a
+@types/throttle-debounce           perpetual       MIT           5.0.0              n/a
+@types/topojson                    perpetual       MIT           3.2.3              n/a
+@types/topojson-client             perpetual       MIT           3.0.0              n/a
+@types/topojson-specification      perpetual       MIT           1.0.2              n/a
+@unovis/dagre-layout               perpetual       MIT           0.8.8-1            Nikita Rokotyan
+@unovis/graphlibrary               perpetual       MIT           2.2.0-1            Nikita Rokotyan
+d3                                 perpetual       ISC           7.2.1              Mike Bostock
+d3-collection                      perpetual       BSD-3-Clause  1.0.7              Mike Bostock
+d3-geo-projection                  perpetual       ISC           4.0.0              Mike Bostock
+d3-interpolate-path                perpetual       BSD-3-Clause  2.2.3              Peter Beshai
+d3-sankey                          perpetual       BSD-3-Clause  0.12.3             Mike Bostock
+elkjs                              perpetual       EPL-2.0       0.8.2              Ulf Rüegg
+geojson                            perpetual       MIT           0.5.0              Casey Cesari
+leaflet                            perpetual       BSD-2-Clause  1.7.1              n/a
+maplibre-gl                        perpetual       BSD-3-Clause  2.1.9              n/a
+supercluster                       perpetual       ISC           7.1.5              Vladimir Agafonkin
+three                              perpetual       MIT           0.135.0            mrdoob
+throttle-debounce                  perpetual       MIT           5.0.0              Ivan Nikolić
+to-px                              perpetual       MIT           1.1.0              Mikola Lysenko
+topojson-client                    perpetual       ISC           3.1.0              Mike Bostock
+tslib                              perpetual       0BSD          2.3.1              Microsoft Corp.
+@rollup/plugin-json                perpetual       MIT           4.1.0              rollup
+@zerollup/ts-transform-paths       perpetual       MIT           1.7.18             Stefan Zerkalica
+rimraf                             perpetual       ISC           3.0.2              Isaac Z. Schlueter
+rollup                             perpetual       MIT           2.61.1             Rich Harris
+rollup-plugin-commonjs             perpetual       MIT           10.1.0             Rich Harris
+rollup-plugin-node-resolve         perpetual       MIT           5.2.0              Rich Harris
+rollup-plugin-postcss              perpetual       MIT           4.0.1              EGOIST
+rollup-plugin-rename-node-modules  perpetual       MIT           1.3.1              Lazyuki
+rollup-plugin-terser               perpetual       MIT           7.0.2              Bogdan Chadkin
+rollup-plugin-typescript2          perpetual       MIT           0.31.1             @ezolenko
+rollup-plugin-visualizer           perpetual       MIT           4.2.2              Denis Bardadym

package/maps.ts

@@ -0,0 +1 @@
+export * from './lib/maps'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/ts",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.1.1-beta.6",
+  "version": "1.1.1-beta.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",

package/rollup.config.js

@@ -0,0 +1,71 @@
+import json from '@rollup/plugin-json'
+import typescript from 'rollup-plugin-typescript2'
+import transformPaths from '@zerollup/ts-transform-paths'
+import resolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
+import postcss from 'rollup-plugin-postcss'
+import renameNodeModules from 'rollup-plugin-rename-node-modules'
+// import visualizer from 'rollup-plugin-visualizer'
+import pkg from './package.json'
+
+const d3Libs = ['d3-array', 'd3-axis', 'd3-brush', 'd3-chord', 'd3-collection', 'd3-color',
+  'd3-contour', 'd3-dispatch', 'd3-drag', 'd3-dsv', 'd3-ease', 'd3-fetch', 'd3-force',
+  'd3-format', 'd3-geo', 'd3-hierarchy', 'd3-interpolate', 'd3-path',
+  'd3-polygon', 'd3-quadtree', 'd3-random', 'd3-sankey', 'd3-scale', 'd3-scale-chromatic',
+  'd3-selection', 'd3-shape', 'd3-time', 'd3-time-format', 'd3-timer', 'd3-transition',
+  'd3-voronoi', 'd3-zoom']
+
+const externals = [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+  ...d3Libs,
+]
+
+const regexesOfPackages = externals // To prevent having node_modules in the build files
+  .map(packageName => new RegExp(`^${packageName}(/.*)?`))
+
+const plugins = [
+  postcss({
+    plugins: [],
+    inject: false,
+    minimize: true,
+  }),
+  commonjs(),
+  resolve({
+    extensions: ['.ts'],
+    mainFields: ['jsnext:main', 'module', 'main', 'browser'],
+  }),
+  json(),
+  typescript({
+    typescript: require('typescript'),
+    transformers: [(service) => transformPaths(service.getProgram())],
+  }),
+  renameNodeModules(),
+  // visualizer({ sourcemap: true, template: 'network' }),
+]
+
+export default [
+  {
+    input: 'src/index.ts',
+    external: regexesOfPackages,
+    treeshake: false,
+    output: {
+      dir: 'lib',
+      sourcemap: true,
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: './src',
+    },
+    plugins,
+  },
+  {
+    input: 'src/maps.ts',
+    output: {
+      dir: 'lib',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: './src',
+    },
+    plugins,
+  },
+]

package/rules/ts-getter-setter.js

@@ -0,0 +1,35 @@
+/* eslint-disable */
+module.exports = {
+  meta: {
+    type: "problem",
+    fixable: "code",
+    schema: [] // no options
+  },
+  create: function(context) {
+    return {
+      MethodDefinition(node) {
+        // to fix https://github.com/microsoft/TypeScript/issues/33939
+        if (node.kind === 'set') {
+          // console.log(node)
+          context.report({
+            node,
+            message: 'Has Setter',
+            fix(fixer) {
+              return fixer.remove(node)
+            }
+          })
+        } else if (node.kind === 'get') {
+          const start = node.range[0];
+          const end = node.value.returnType.range[0]
+          context.report({
+            node,
+            message: 'Has Getter',
+            fix(fixer) {
+              return fixer.replaceTextRange([start, end], node.key.name)
+            }
+          })
+        }
+      }
+    };
+  }
+};

package/src/components/area/config.ts

@@ -0,0 +1,29 @@
+import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
+
+// Types
+import { CurveType } from 'types/curve'
+import { NumericAccessor, StringAccessor } from 'types/accessor'
+
+export interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
+  /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */
+  curveType?: CurveType;
+  /** Baseline value or accessor function. Default: `undefined` */
+  baseline?: NumericAccessor<Datum>;
+  /** Opacity value or accessor function. Default: `1` */
+  opacity?: NumericAccessor<Datum>;
+  /** Optional area cursor. String or accessor function. Default: `null` */
+  cursor?: StringAccessor<Datum[]>;
+  /** If an area is smaller than 1px, extend it to have 1px height.
+   * This setting is useful when some of the area values are zeros or very small so visually they become
+   * practically invisible, but you want to show that the data behind them exists and they're not just empty segments.
+   * Default: `false` */
+  minHeight1Px?: boolean;
+}
+
+export class AreaConfig<Datum> extends XYComponentConfig<Datum> implements AreaConfigInterface<Datum> {
+  curveType = CurveType.MonotoneX
+  baseline = (): number => 0
+  opacity = 1
+  cursor = null
+  minHeight1Px = false
+}

package/src/components/area/index.ts

@@ -0,0 +1,133 @@
+import { select } from 'd3-selection'
+import { Transition } from 'd3-transition'
+import { area, Area as AreaInterface } from 'd3-shape'
+import { interpolatePath } from 'd3-interpolate-path'
+
+// Core
+import { XYComponentCore } from 'core/xy-component'
+
+// Utils
+import { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+import { getColor } from 'utils/color'
+
+// Types
+import { Curve } from 'types/curve'
+import { NumericAccessor } from 'types/accessor'
+
+// Local Types
+import { AreaDatum } from './types'
+
+// Config
+import { AreaConfig, AreaConfigInterface } from './config'
+
+// Styles
+import * as s from './style'
+
+export class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaConfigInterface<Datum>> {
+  static selectors = s
+  stacked = true
+  config: AreaConfig<Datum> = new AreaConfig()
+  areaGen: AreaInterface<AreaDatum>
+  private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0
+
+  events = {
+    [Area.selectors.area]: {},
+  }
+
+  constructor (config?: AreaConfigInterface<Datum>) {
+    super()
+    if (config) this.config.init(config)
+  }
+
+  _render (customDuration?: number): void {
+    super._render(customDuration)
+    const { config, datamodel: { data } } = this
+    const duration = isNumber(customDuration) ? customDuration : config.duration
+
+    const curveGen = Curve[config.curveType]
+    this.areaGen = area<AreaDatum>()
+      .x(d => d.x)
+      .y0(d => d.y0)
+      .y1(d => {
+        const isSmallerThanPixel = Math.abs(d.y1 - d.y0) < 1
+        return d.y1 - ((isSmallerThanPixel && config.minHeight1Px) ? 1 : 0)
+      })
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      .curve(curveGen)
+
+    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]
+    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))
+
+    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)
+    this._prevNegative = stacked.map(s => !!s.negative)
+    const stackedData: AreaDatum[][] = stacked.map(
+      arr => arr.map(
+        (d, j) => ({
+          y0: this.yScale(d[0]),
+          y1: this.yScale(d[1]),
+          x: areaDataX[j],
+        })
+      )
+    )
+
+    // We reverse the data in order to have the first areas to be displayed on top
+    //   for better visibility when they're close to zero
+    const areaMaxIdx = stackedData.length - 1
+    const stackedDataReversed = stackedData.reverse()
+    const areas = this.g
+      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)
+      .data(stackedDataReversed)
+
+    const areasEnter = areas.enter().append('path')
+      .attr('class', s.area)
+      .attr('d', d => this.areaGen(d) || this._emptyPath())
+      .style('opacity', 0)
+      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))
+
+    const areasMerged = smartTransition(areasEnter.merge(areas), duration)
+      .style('opacity', (d, i) => {
+        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)
+        return isDefined ? getNumber(d, config.opacity, areaMaxIdx - i) : 0
+      })
+      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))
+      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))
+
+    if (duration) {
+      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>
+      transition.attrTween('d', (d, i, el) => {
+        const previous = select(el[i]).attr('d')
+        const next = this.areaGen(d) || this._emptyPath()
+        return interpolatePath(previous, next)
+      })
+    } else {
+      areasMerged.attr('d', d => this.areaGen(d) || this._emptyPath())
+    }
+
+    smartTransition(areas.exit(), duration)
+      .style('opacity', 0)
+      .remove()
+  }
+
+  getYDataExtent (scaleByVisibleData: boolean): number[] {
+    const { config, datamodel } = this
+    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]
+
+    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data
+    return getStackedExtent(data, config.baseline, ...yAccessors)
+  }
+
+  _emptyPath (): string {
+    const xRange = this.xScale.range()
+    const yDomain = this.yScale.domain() as number[]
+
+    const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)
+    const y1 = y0
+
+    return this.areaGen([
+      { y0, y1, x: xRange[0] },
+      { y0, y1, x: xRange[1] },
+    ])
+  }
+}

package/{components/area/style.js → src/components/area/style.ts}

@@ -1,9 +1,11 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const root = css `
+
+export const root = css`
   label: area-component;
-`;
-const globalStyles = injectGlobal `
+`
+
+export const globalStyles = injectGlobal`
   :root {
     --vis-area-cursor: default;
     --vis-area-fill-opacity: 1;
@@ -22,8 +24,8 @@ const globalStyles = injectGlobal `
     --vis-area-stroke-color: var(--vis-dark-area-stroke-color);
   }
 
-`;
-const area = css `
+`
+export const area = css`
   label: area;
   cursor: var(--vis-area-cursor);
   fill-opacity: var(--vis-area-fill-opacity);
@@ -36,7 +38,4 @@ const area = css `
     fill-opacity: var(--vis-area-hover-fill-opacity);
     stroke-width: var(--vis-area-hover-stroke-width);
   }
-`;
-
-export { area, globalStyles, root };
-//# sourceMappingURL=style.js.map
+`

package/src/components/area/types.ts

@@ -0,0 +1,2 @@
+/** Data type for Area Generator: [y0, y1, x] */
+export type AreaDatum = { y0: number; y1: number; x: number }

package/src/components/axis/config.ts

@@ -0,0 +1,76 @@
+import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
+
+// Types
+import { AxisType } from 'components/axis/types'
+import { Position } from 'types/position'
+import { FitMode, TrimMode, TextAlign } from 'types/text'
+
+// We extend partial XY config interface because x and y properties are optional for Axis
+export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
+  /** Axis position: `Position.Top`, `Position.Bottom`, `Position.Right` or `Position.Left`. Default: `undefined` */
+  position?: Position | string;
+  /** Axis type: `AxisType.X` or `AxisType.Y` */
+  type?: AxisType | string;
+  /** Extend the axis domain line to be full width or full height. Default: `true` */
+  fullSize?: boolean;
+  /** Axis label. Default: `undefined` */
+  label?: string;
+  /** Font size of the axis label as CSS string. Default: `null` */
+  labelFontSize?: string | null;
+  /** Distance between the axis and the label in pixels. Default: `8` */
+  labelMargin?: number;
+  /** Sets whether to draw the grid lines or not. Default: `true` */
+  gridLine?: boolean;
+  /** Sets whether to draw the tick lines or not. Default: `true` */
+  tickLine?: boolean;
+  /** Sets whether to draw the domain line or not. Default: `true` */
+  domainLine?: boolean;
+  /** Draw the min and max axis ticks only. Default: `false` */
+  minMaxTicksOnly?: boolean;
+  /** Tick label formatter function. Default: `undefined` */
+  tickFormat?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
+  /** Explicitly set tick values. Default: `undefined` */
+  tickValues?: number[];
+  /** Set the approximate number of axis ticks (will be passed to D3's axis constructor). Default: `undefined` */
+  numTicks?: number;
+  /** Tick text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */
+  tickTextFitMode?: FitMode | string;
+  /** Maximum width in pixels for the tick text to be wrapped or trimmed. Default: `undefined` */
+  tickTextWidth?: number;
+  /** Tick text wrapping separator. String or array of strings. Default: `' '` */
+  tickTextSeparator?: string | string[];
+  /** Force word break for ticks when they don't fit. Default: `false` */
+  tickTextForceWordBreak?: boolean;
+  /** Tick text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */
+  tickTextTrimType?: TrimMode | string;
+  /** Font size of the tick text as CSS string. Default: `null` */
+  tickTextFontSize?: string | null;
+  /** Text alignment for ticks: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `undefined` */
+  tickTextAlign?: TextAlign | string;
+  /** The spacing in pixels between the tick and it's label. Default: `8` */
+  tickPadding?: number;
+}
+
+export class AxisConfig<Datum> extends XYComponentConfig<Datum> implements AxisConfigInterface<Datum> {
+  position = undefined
+  type = undefined
+  label = undefined
+  labelFontSize = null
+  gridLine = true
+  tickLine = true
+  domainLine = true
+  numTicks = undefined
+  minMaxTicksOnly = false
+  tickTextWidth = undefined
+  tickTextSeparator = ' '
+  tickTextForceWordBreak = false
+  tickTextTrimType = TrimMode.Middle
+  tickTextFitMode = FitMode.Wrap
+  tickTextFontSize = null
+  tickTextAlign = undefined
+  labelMargin = 8
+  tickFormat = undefined
+  tickValues = undefined
+  fullSize = true
+  tickPadding = 8
+}