@unovis/ts 1.1.2-beta.12 → 1.1.2-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components/line/index.js
CHANGED
|
@@ -83,7 +83,6 @@ class Line extends XYComponentCore {
|
|
|
83
83
|
linesEnter
|
|
84
84
|
.append('path')
|
|
85
85
|
.attr('class', linePath)
|
|
86
|
-
.attr('d', this._emptyPath())
|
|
87
86
|
.attr('stroke', (d, i) => getColor(data, config.color, i))
|
|
88
87
|
.attr('stroke-opacity', 0)
|
|
89
88
|
.attr('stroke-width', config.lineWidth);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/line/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { CurveFactoryLineOnly, Line as LineGenInterface, line } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, getValue, isArray, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Curve, CurveType } from 'types/curve'\nimport { Direction } from 'types/direction'\n\n// Local Types\nimport { LineData, LineDatum } from './types'\n\n// Config\nimport { LineConfig, LineConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Line<Datum> extends XYComponentCore<Datum, LineConfig<Datum>, LineConfigInterface<Datum>> {\n static selectors = s\n config: LineConfig<Datum> = new LineConfig()\n lineGen: LineGenInterface<{ x: number; y: number; defined: boolean }>\n curve: CurveFactoryLineOnly = Curve[CurveType.MonotoneX]\n events = {\n [Line.selectors.line]: {\n mouseover: this._highlight.bind(this),\n mouseleave: this._resetHighlight.bind(this),\n },\n }\n\n constructor (config?: LineConfigInterface<Datum>) {\n super()\n if (config) this.config.init(config)\n }\n\n get bleed (): Spacing {\n const { config: { lineWidth } } = this\n const yDomain = this.yScale.domain() as [number, number]\n const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n ? Direction.North\n : Direction.South\n const isYDirectionSouth = yDirection === Direction.South\n\n const isLineThick = lineWidth > 3\n const isLineVeryThick = lineWidth >= 10\n return {\n top: !isLineVeryThick && (\n (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n ) ? 0 : lineWidth / 2,\n bottom: !isLineVeryThick && (\n (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n ) ? 0 : lineWidth / 2,\n left: isLineThick ? lineWidth / 2 : 0,\n right: isLineThick ? lineWidth / 2 : 0,\n }\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, datamodel: { data } } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n this.curve = Curve[config.curveType]\n this.lineGen = line<{ x: number; y: number; defined: boolean }>()\n .x(d => d.x)\n .y(d => d.y)\n .defined(d => d.defined)\n .curve(this.curve)\n\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n const lineDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n const lineData: LineData[] = yAccessors.map(a => {\n const ld: LineDatum[] = data.map((d, i) => {\n const rawValue = getNumber(d, a, i)\n // If `rawValue` is not numerical or if it's not finite (`NaN`, `undefined`, ...), we replace it with `config.fallbackValue`\n const value = (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue) ? rawValue : config.fallbackValue\n return {\n x: lineDataX[i],\n y: this.yScale(value ?? 0),\n defined: isFinite(value),\n value,\n }\n })\n\n const defined = ld.reduce((def, d) => (d.defined || def), false)\n // If the line consists only of `null` values, we'll still render it but it'll be invisible.\n // Such trick allows us to have better animated transitions.\n const visible = defined && ld.some(d => d.value !== null)\n return {\n values: ld,\n defined,\n visible,\n }\n })\n\n const lines = this.g\n .selectAll<SVGGElement, LineData>(`.${s.line}`)\n .data(lineData)\n\n const linesEnter = lines.enter().append('g')\n .attr('class', s.line)\n\n linesEnter\n .append('path')\n .attr('class', s.linePath)\n .attr('d', this._emptyPath())\n .attr('stroke', (d, i) => getColor(data, config.color, i))\n .attr('stroke-opacity', 0)\n .attr('stroke-width', config.lineWidth)\n\n linesEnter\n .append('path')\n .attr('class', s.lineSelectionHelper)\n .attr('d', this._emptyPath())\n\n const linesMerged = linesEnter.merge(lines)\n linesMerged.style('cursor', (d, i) => getString(data, config.cursor, i))\n linesMerged.each((d, i, elements) => {\n const group = select(elements[i])\n const linePath = group.select<SVGPathElement>(`.${s.linePath}`)\n const lineSelectionHelper = group.select(`.${s.lineSelectionHelper}`)\n\n const isLineVisible = d.visible\n const dashArray = getValue<LineData, number[]>(d, config.lineDashArray, i)\n const transition = smartTransition(linePath, duration)\n .attr('stroke', getColor(data, config.color, i))\n .attr('stroke-width', config.lineWidth)\n .attr('stroke-opacity', isLineVisible ? 1 : 0)\n .style('stroke-dasharray', dashArray?.join(' ') ?? null) // We use `.style` because there's also a default CSS-variable for stroke-dasharray\n\n const hasUndefinedSegments = d.values.some(d => !d.defined)\n const svgPathD = this.lineGen(d.values)\n\n if (duration && !hasUndefinedSegments) {\n const previous = linePath.attr('d') || this._emptyPath()\n const next = svgPathD || this._emptyPath()\n const t = transition as Transition<SVGPathElement, LineData, SVGGElement, LineData>\n t.attrTween('d', () => interpolatePath(previous, next))\n } else if (d.visible) {\n transition.attr('d', svgPathD)\n }\n\n lineSelectionHelper\n .attr('d', svgPathD)\n .attr('visibility', isLineVisible ? null : 'hidden')\n })\n\n smartTransition(lines.exit(), duration)\n .style('opacity', 0)\n .remove()\n }\n\n private _emptyPath (): string {\n const xRange = this.xScale.range()\n const yRange = this.yScale.range()\n return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n }\n\n private _highlight (datum, i, els): void {\n const { config } = this\n\n if (config.highlightOnHover) {\n this.g\n .selectAll(`.${s.line}`)\n .classed(s.dim, d => d !== datum)\n }\n }\n\n private _resetHighlight (d, i, els): void {\n const { config } = this\n\n if (config.highlightOnHover) {\n this.g\n .selectAll(`.${s.line}`)\n .classed(s.dim, false)\n }\n }\n}\n"],"names":["s.line","s.linePath","s.lineSelectionHelper","linePath","lineSelectionHelper","s.dim","s"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/line/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { CurveFactoryLineOnly, Line as LineGenInterface, line } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, getValue, isArray, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Curve, CurveType } from 'types/curve'\nimport { Direction } from 'types/direction'\n\n// Local Types\nimport { LineData, LineDatum } from './types'\n\n// Config\nimport { LineConfig, LineConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Line<Datum> extends XYComponentCore<Datum, LineConfig<Datum>, LineConfigInterface<Datum>> {\n static selectors = s\n config: LineConfig<Datum> = new LineConfig()\n lineGen: LineGenInterface<{ x: number; y: number; defined: boolean }>\n curve: CurveFactoryLineOnly = Curve[CurveType.MonotoneX]\n events = {\n [Line.selectors.line]: {\n mouseover: this._highlight.bind(this),\n mouseleave: this._resetHighlight.bind(this),\n },\n }\n\n constructor (config?: LineConfigInterface<Datum>) {\n super()\n if (config) this.config.init(config)\n }\n\n get bleed (): Spacing {\n const { config: { lineWidth } } = this\n const yDomain = this.yScale.domain() as [number, number]\n const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n ? Direction.North\n : Direction.South\n const isYDirectionSouth = yDirection === Direction.South\n\n const isLineThick = lineWidth > 3\n const isLineVeryThick = lineWidth >= 10\n return {\n top: !isLineVeryThick && (\n (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n ) ? 0 : lineWidth / 2,\n bottom: !isLineVeryThick && (\n (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n ) ? 0 : lineWidth / 2,\n left: isLineThick ? lineWidth / 2 : 0,\n right: isLineThick ? lineWidth / 2 : 0,\n }\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, datamodel: { data } } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n this.curve = Curve[config.curveType]\n this.lineGen = line<{ x: number; y: number; defined: boolean }>()\n .x(d => d.x)\n .y(d => d.y)\n .defined(d => d.defined)\n .curve(this.curve)\n\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n const lineDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n const lineData: LineData[] = yAccessors.map(a => {\n const ld: LineDatum[] = data.map((d, i) => {\n const rawValue = getNumber(d, a, i)\n // If `rawValue` is not numerical or if it's not finite (`NaN`, `undefined`, ...), we replace it with `config.fallbackValue`\n const value = (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue) ? rawValue : config.fallbackValue\n return {\n x: lineDataX[i],\n y: this.yScale(value ?? 0),\n defined: isFinite(value),\n value,\n }\n })\n\n const defined = ld.reduce((def, d) => (d.defined || def), false)\n // If the line consists only of `null` values, we'll still render it but it'll be invisible.\n // Such trick allows us to have better animated transitions.\n const visible = defined && ld.some(d => d.value !== null)\n return {\n values: ld,\n defined,\n visible,\n }\n })\n\n const lines = this.g\n .selectAll<SVGGElement, LineData>(`.${s.line}`)\n .data(lineData)\n\n const linesEnter = lines.enter().append('g')\n .attr('class', s.line)\n\n linesEnter\n .append('path')\n .attr('class', s.linePath)\n .attr('stroke', (d, i) => getColor(data, config.color, i))\n .attr('stroke-opacity', 0)\n .attr('stroke-width', config.lineWidth)\n\n linesEnter\n .append('path')\n .attr('class', s.lineSelectionHelper)\n .attr('d', this._emptyPath())\n\n const linesMerged = linesEnter.merge(lines)\n linesMerged.style('cursor', (d, i) => getString(data, config.cursor, i))\n linesMerged.each((d, i, elements) => {\n const group = select(elements[i])\n const linePath = group.select<SVGPathElement>(`.${s.linePath}`)\n const lineSelectionHelper = group.select(`.${s.lineSelectionHelper}`)\n\n const isLineVisible = d.visible\n const dashArray = getValue<LineData, number[]>(d, config.lineDashArray, i)\n const transition = smartTransition(linePath, duration)\n .attr('stroke', getColor(data, config.color, i))\n .attr('stroke-width', config.lineWidth)\n .attr('stroke-opacity', isLineVisible ? 1 : 0)\n .style('stroke-dasharray', dashArray?.join(' ') ?? null) // We use `.style` because there's also a default CSS-variable for stroke-dasharray\n\n const hasUndefinedSegments = d.values.some(d => !d.defined)\n const svgPathD = this.lineGen(d.values)\n\n if (duration && !hasUndefinedSegments) {\n const previous = linePath.attr('d') || this._emptyPath()\n const next = svgPathD || this._emptyPath()\n const t = transition as Transition<SVGPathElement, LineData, SVGGElement, LineData>\n t.attrTween('d', () => interpolatePath(previous, next))\n } else if (d.visible) {\n transition.attr('d', svgPathD)\n }\n\n lineSelectionHelper\n .attr('d', svgPathD)\n .attr('visibility', isLineVisible ? null : 'hidden')\n })\n\n smartTransition(lines.exit(), duration)\n .style('opacity', 0)\n .remove()\n }\n\n private _emptyPath (): string {\n const xRange = this.xScale.range()\n const yRange = this.yScale.range()\n return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n }\n\n private _highlight (datum, i, els): void {\n const { config } = this\n\n if (config.highlightOnHover) {\n this.g\n .selectAll(`.${s.line}`)\n .classed(s.dim, d => d !== datum)\n }\n }\n\n private _resetHighlight (d, i, els): void {\n const { config } = this\n\n if (config.highlightOnHover) {\n this.g\n .selectAll(`.${s.line}`)\n .classed(s.dim, false)\n }\n }\n}\n"],"names":["s.line","s.linePath","s.lineSelectionHelper","linePath","lineSelectionHelper","s.dim","s"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ function updatePoints(selection, config, xScale, yScale, duration) {
|
|
|
21
21
|
selection.each((d, index, elements) => {
|
|
22
22
|
var _a, _b;
|
|
23
23
|
const i = d._point.pointIndex;
|
|
24
|
-
const group = select(elements[
|
|
24
|
+
const group = select(elements[index]);
|
|
25
25
|
const label = group.select('text');
|
|
26
26
|
const path = group.select('path');
|
|
27
27
|
// Shape
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"point.js","sources":["../../../../src/components/scatter/modules/point.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { symbol } from 'd3-shape'\nimport { color } from 'd3-color'\nimport { Position } from 'types/position'\nimport { Symbol } from 'types/symbol'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValue, isStringCSSVariable } from 'utils/misc'\nimport { hexToBrightness } from 'utils/color'\nimport { getValue } from 'utils/data'\n\n// Types\nimport { ContinuousScale } from 'types/scale'\n\n// Config\nimport { ScatterConfig } from '../config'\n\n// Local Types\nimport { ScatterPoint } from '../types'\n\n// Local Utils\nimport { getCentralLabelFontSize, getLabelShift } from './utils'\n\nexport function createPoints<Datum> (\n selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,\n xScale: ContinuousScale,\n yScale: ContinuousScale\n): void {\n selection.attr('transform', d => `translate(${d._point.xValue},${d._point.yValue})`)\n selection.append('path').style('fill', d => d._point.color)\n selection.append('text')\n .style('pointer-events', 'none')\n\n selection.attr('transform', d => `translate(${xScale(d._point.xValue)},${yScale(d._point.yValue)}) scale(0)`)\n}\n\nexport function updatePoints<Datum> (\n selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,\n config: ScatterConfig<Datum>,\n xScale: ContinuousScale,\n yScale: ContinuousScale,\n duration: number\n): void {\n const symbolGenerator = symbol()\n\n selection.each((d, index, elements) => {\n const i = d._point.pointIndex\n const group: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]> = select(elements[
|
|
1
|
+
{"version":3,"file":"point.js","sources":["../../../../src/components/scatter/modules/point.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { symbol } from 'd3-shape'\nimport { color } from 'd3-color'\nimport { Position } from 'types/position'\nimport { Symbol } from 'types/symbol'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValue, isStringCSSVariable } from 'utils/misc'\nimport { hexToBrightness } from 'utils/color'\nimport { getValue } from 'utils/data'\n\n// Types\nimport { ContinuousScale } from 'types/scale'\n\n// Config\nimport { ScatterConfig } from '../config'\n\n// Local Types\nimport { ScatterPoint } from '../types'\n\n// Local Utils\nimport { getCentralLabelFontSize, getLabelShift } from './utils'\n\nexport function createPoints<Datum> (\n selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,\n xScale: ContinuousScale,\n yScale: ContinuousScale\n): void {\n selection.attr('transform', d => `translate(${d._point.xValue},${d._point.yValue})`)\n selection.append('path').style('fill', d => d._point.color)\n selection.append('text')\n .style('pointer-events', 'none')\n\n selection.attr('transform', d => `translate(${xScale(d._point.xValue)},${yScale(d._point.yValue)}) scale(0)`)\n}\n\nexport function updatePoints<Datum> (\n selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,\n config: ScatterConfig<Datum>,\n xScale: ContinuousScale,\n yScale: ContinuousScale,\n duration: number\n): void {\n const symbolGenerator = symbol()\n\n selection.each((d, index, elements) => {\n const i = d._point.pointIndex\n const group: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]> = select(elements[index])\n const label = group.select('text')\n const path = group.select('path')\n\n // Shape\n const pointDiameter = d._point.sizePx\n const pointColor = d._point.color\n path.attr('d', () => {\n const svgPath = d._point.shape ? symbolGenerator\n .size(Math.PI * pointDiameter * pointDiameter / 4)\n .type(Symbol[d._point.shape])() : null\n return svgPath\n })\n\n smartTransition(path, duration)\n .style('fill', pointColor)\n .style('stroke', pointColor)\n\n // Label\n const labelPosition = getValue(d, config.labelPosition, i) as `${Position}`\n const isLabelPositionCenter = (labelPosition !== Position.Top) && (labelPosition !== Position.Bottom) &&\n (labelPosition !== Position.Left) && (labelPosition !== Position.Right)\n const pointLabelText = d._point.label ?? ''\n const textLength = pointLabelText.length\n const centralLabelFontSize = getCentralLabelFontSize(pointDiameter, textLength)\n\n let labelColor = d._point.labelColor\n if (!labelColor && isLabelPositionCenter) {\n const c = pointColor || 'var(--vis-scatter-fill-color)'\n const hex = color(isStringCSSVariable(c) ? getCSSVariableValue(c, group.node()) : c)?.hex()\n const brightness = hexToBrightness(hex)\n labelColor = brightness > config.labelTextBrightnessRatio ? 'var(--vis-scatter-point-label-text-color-dark)' : 'var(--vis-scatter-point-label-text-color-light)'\n }\n\n const labelShift = getLabelShift(labelPosition, pointDiameter)\n label.html(pointLabelText)\n .attr('x', labelShift[0])\n .attr('y', labelShift[1])\n .style('font-size', isLabelPositionCenter ? centralLabelFontSize : null)\n .style('text-anchor', () => {\n switch (labelPosition) {\n case Position.Right: return null\n case Position.Left: return 'end'\n default: return 'middle'\n }\n })\n .style('dominant-baseline', () => {\n switch (labelPosition) {\n case Position.Top: return null\n case Position.Bottom: return 'hanging'\n default: return 'central'\n }\n })\n\n smartTransition(label, duration)\n .style('fill', labelColor)\n\n path.style('cursor', d._point.cursor)\n })\n\n smartTransition(selection, duration)\n .attr('transform', d => `translate(${xScale(d._point.xValue)},${yScale(d._point.yValue)}) scale(1)`)\n}\n\nexport function removePoints<Datum> (\n selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,\n xScale: ContinuousScale,\n yScale: ContinuousScale,\n duration: number\n): void {\n smartTransition(selection, duration)\n .attr('transform', d => `translate(${xScale(d._point.xValue)},${yScale(d._point.yValue)}) scale(0)`)\n .remove()\n}\n\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unovis/ts",
|
|
3
3
|
"description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
|
|
4
|
-
"version": "1.1.2-beta.
|
|
4
|
+
"version": "1.1.2-beta.13",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|
package/types/accessor.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export declare type NumericAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => number | null) | number | null | undefined;
|
|
2
|
-
export declare type StringAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => string | null) | string | null;
|
|
1
|
+
export declare type NumericAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => number | null | undefined) | number | null | undefined;
|
|
2
|
+
export declare type StringAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => string | null | undefined) | string | null;
|
|
3
3
|
export declare type ColorAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => string | null | undefined) | string | string[] | null | undefined;
|
|
4
|
-
export declare type BooleanAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => boolean | null) | boolean | null;
|
|
4
|
+
export declare type BooleanAccessor<Datum> = ((d: Datum, i: number, ...any: any[]) => boolean | null | undefined) | boolean | null | undefined;
|
|
5
5
|
export declare type GenericAccessor<ReturnType, Datum> = ((d: Datum, i: number, ...any: any[]) => ReturnType | null | undefined) | ReturnType | null | undefined;
|