@unovis/ts 1.1.2-beta.13 → 1.1.2-beta.14
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/scatter/config.d.ts +6 -0
- package/components/scatter/config.js +2 -0
- package/components/scatter/config.js.map +1 -1
- package/components/scatter/index.js +2 -0
- package/components/scatter/index.js.map +1 -1
- package/components/scatter/modules/point.js +7 -4
- package/components/scatter/modules/point.js.map +1 -1
- package/components/scatter/style.js +2 -2
- package/components/scatter/style.js.map +1 -1
- package/components/scatter/types.d.ts +2 -0
- package/package.json +1 -1
|
@@ -30,6 +30,10 @@ export interface ScatterConfigInterface<Datum> extends XYComponentConfigInterfac
|
|
|
30
30
|
labelTextBrightnessRatio?: number;
|
|
31
31
|
/** Label position. Default: `Position.Bottom` */
|
|
32
32
|
labelPosition?: GenericAccessor<Position | string, Datum>;
|
|
33
|
+
/** Point stroke color. Default: `undefined` */
|
|
34
|
+
strokeColor?: ColorAccessor<Datum>;
|
|
35
|
+
/** Point stroke width. Default: `undefined` */
|
|
36
|
+
strokeWidth?: NumericAccessor<Datum>;
|
|
33
37
|
}
|
|
34
38
|
export declare class ScatterConfig<Datum> extends XYComponentConfig<Datum> implements ScatterConfigInterface<Datum> {
|
|
35
39
|
size: number;
|
|
@@ -41,4 +45,6 @@ export declare class ScatterConfig<Datum> extends XYComponentConfig<Datum> imple
|
|
|
41
45
|
labelPosition: Position;
|
|
42
46
|
cursor: any;
|
|
43
47
|
labelTextBrightnessRatio: number;
|
|
48
|
+
strokeColor: ScatterConfigInterface<Datum>['strokeColor'];
|
|
49
|
+
strokeWidth: ScatterConfigInterface<Datum>['strokeWidth'];
|
|
44
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/scatter/config.ts"],"sourcesContent":["import { ScalePower } from 'd3-scale'\n// Core\nimport { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { Scale, ContinuousScale } from 'types/scale'\nimport { SymbolType } from 'types/symbol'\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\n\nexport interface ScatterConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n /**\n * Size of the scatter plot marker (e.g. diameter if `SymbolType.Circle` is used for `shape`) in pixels.\n * Can be a constant value or an accessor function. But if `sizeRange` is set, then the values will be treated\n * as an input to `sizeScale`, and the resulting size will be different.\n * Default: `10`\n */\n size?: NumericAccessor<Datum>;\n /** Size scale to be used if the `sizeRange` was set. Default: `Scale.scaleSqrt()` */\n sizeScale?: ContinuousScale;\n /** Size range in the format of `[number, number]` to rescale the input values. Default: `undefined` */\n sizeRange?: [number, number];\n /** Shape of the scatter point. Accessor function or constant value: `SymbolType.Circle`, `SymbolType.Cross`, `SymbolType.Diamond`, `SymbolType.Square`,\n * `SymbolType.Star`, `SymbolType.Triangle` or `SymbolType.Wye`.\n * Default: `SymbolType.Circle` */\n shape?: ((d: Datum, i?: number, ...any) => (SymbolType | string)) | SymbolType | string;\n /** Label accessor function or string. Default: `undefined` */\n label?: StringAccessor<Datum>;\n /** Label color. Default: `undefined` */\n labelColor?: ColorAccessor<Datum>;\n /** Optional point cursor. Default: `null` */\n cursor?: StringAccessor<Datum>;\n /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */\n labelTextBrightnessRatio?: number;\n /** Label position. Default: `Position.Bottom` */\n labelPosition?: GenericAccessor<Position | string, Datum>;\n}\n\nexport class ScatterConfig<Datum> extends XYComponentConfig<Datum> implements ScatterConfigInterface<Datum> {\n size = 10\n sizeScale: ScalePower<number, number> = Scale.scaleSqrt()\n sizeRange = undefined\n shape = SymbolType.Circle\n label = undefined\n labelColor = undefined\n labelPosition = Position.Bottom\n cursor = null\n labelTextBrightnessRatio = 0.65\n}\n"],"names":[],"mappings":";;;;;AACA;
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/scatter/config.ts"],"sourcesContent":["import { ScalePower } from 'd3-scale'\n// Core\nimport { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { Scale, ContinuousScale } from 'types/scale'\nimport { SymbolType } from 'types/symbol'\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\n\nexport interface ScatterConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n /**\n * Size of the scatter plot marker (e.g. diameter if `SymbolType.Circle` is used for `shape`) in pixels.\n * Can be a constant value or an accessor function. But if `sizeRange` is set, then the values will be treated\n * as an input to `sizeScale`, and the resulting size will be different.\n * Default: `10`\n */\n size?: NumericAccessor<Datum>;\n /** Size scale to be used if the `sizeRange` was set. Default: `Scale.scaleSqrt()` */\n sizeScale?: ContinuousScale;\n /** Size range in the format of `[number, number]` to rescale the input values. Default: `undefined` */\n sizeRange?: [number, number];\n /** Shape of the scatter point. Accessor function or constant value: `SymbolType.Circle`, `SymbolType.Cross`, `SymbolType.Diamond`, `SymbolType.Square`,\n * `SymbolType.Star`, `SymbolType.Triangle` or `SymbolType.Wye`.\n * Default: `SymbolType.Circle` */\n shape?: ((d: Datum, i?: number, ...any) => (SymbolType | string)) | SymbolType | string;\n /** Label accessor function or string. Default: `undefined` */\n label?: StringAccessor<Datum>;\n /** Label color. Default: `undefined` */\n labelColor?: ColorAccessor<Datum>;\n /** Optional point cursor. Default: `null` */\n cursor?: StringAccessor<Datum>;\n /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */\n labelTextBrightnessRatio?: number;\n /** Label position. Default: `Position.Bottom` */\n labelPosition?: GenericAccessor<Position | string, Datum>;\n /** Point stroke color. Default: `undefined` */\n strokeColor?: ColorAccessor<Datum>;\n /** Point stroke width. Default: `undefined` */\n strokeWidth?: NumericAccessor<Datum>;\n}\n\nexport class ScatterConfig<Datum> extends XYComponentConfig<Datum> implements ScatterConfigInterface<Datum> {\n size = 10\n sizeScale: ScalePower<number, number> = Scale.scaleSqrt()\n sizeRange = undefined\n shape = SymbolType.Circle\n label = undefined\n labelColor = undefined\n labelPosition = Position.Bottom\n cursor = null\n labelTextBrightnessRatio = 0.65\n strokeColor: ScatterConfigInterface<Datum>['strokeColor'] = undefined\n strokeWidth: ScatterConfigInterface<Datum>['strokeWidth'] = undefined\n}\n"],"names":[],"mappings":";;;;;AACA;AAyCM,MAAO,aAAqB,SAAQ,iBAAwB,CAAA;AAAlE,IAAA,WAAA,GAAA;;QACE,IAAI,CAAA,IAAA,GAAG,EAAE,CAAA;AACT,QAAA,IAAA,CAAA,SAAS,GAA+B,KAAK,CAAC,SAAS,EAAE,CAAA;QACzD,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;AACrB,QAAA,IAAA,CAAA,KAAK,GAAG,UAAU,CAAC,MAAM,CAAA;QACzB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;AACtB,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAA;QAC/B,IAAM,CAAA,MAAA,GAAG,IAAI,CAAA;QACb,IAAwB,CAAA,wBAAA,GAAG,IAAI,CAAA;QAC/B,IAAW,CAAA,WAAA,GAAiD,SAAS,CAAA;QACrE,IAAW,CAAA,WAAA,GAAiD,SAAS,CAAA;KACtE;AAAA;;;;"}
|
|
@@ -134,6 +134,8 @@ class Scatter extends XYComponentCore {
|
|
|
134
134
|
yValue: yValue,
|
|
135
135
|
sizePx: pointSizeScaled,
|
|
136
136
|
color: getColor(d, config.color, j),
|
|
137
|
+
strokeColor: getColor(d, config.strokeColor, j, true),
|
|
138
|
+
strokeWidthPx: getNumber(d, config.strokeWidth, j),
|
|
137
139
|
shape: getString(d, config.shape, j),
|
|
138
140
|
label: getString(d, config.label, j),
|
|
139
141
|
labelColor: getValue(d, config.labelColor, j),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { max, min } from 'd3-array'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, getExtent, getNumber, getString, isArray, flatten, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\nimport { SymbolType } from 'types/symbol'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { ScatterPointGroupNode, ScatterPoint } from './types'\n\n// Config\nimport { ScatterConfig, ScatterConfigInterface } from './config'\n\n// Modules\nimport { createPoints, updatePoints, removePoints } from './modules/point'\nimport { collideLabels, getEstimatedLabelBBox } from './modules/utils'\n\n// Styles\nimport * as s from './style'\n\nexport class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfig<Datum>, ScatterConfigInterface<Datum>> {\n static selectors = s\n config: ScatterConfig<Datum> = new ScatterConfig()\n events = {\n [Scatter.selectors.point]: {\n mouseenter: this._onPointMouseOver.bind(this),\n mouseleave: this._onPointMouseOut.bind(this),\n },\n }\n\n private _pointData: ScatterPoint<Datum>[][] = []\n private _points: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>\n private _collideLabelsAnimFrameId: ReturnType<typeof requestAnimationFrame>\n\n constructor (config?: ScatterConfigInterface<Datum>) {\n super()\n if (config) this.setConfig(config)\n }\n\n setConfig (config: ScatterConfigInterface<Datum>): void {\n super.setConfig(config)\n this._updateSizeScale()\n }\n\n setData (data: Datum[]): void {\n super.setData(data)\n this._updateSizeScale()\n }\n\n get bleed (): Spacing {\n this._pointData = this._getOnScreenData()\n const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)\n\n const yRangeStart = min(this.yScale.range())\n const yRangeEnd = max(this.yScale.range())\n const xRangeStart = this.xScale.range()[0]\n const xRangeEnd = this.xScale.range()[1]\n\n const fontSizePx = getCSSVariableValueInPixels('var(--vis-scatter-point-label-text-font-size)', this.element)\n\n const extent = pointDataFlat.reduce((ext, d) => {\n const labelPosition = getValue(d, this.config.labelPosition, d._point.pointIndex)\n const labelBBox = getEstimatedLabelBBox(d, labelPosition, this.xScale, this.yScale, fontSizePx)\n const x = this.xScale(d._point.xValue)\n const y = this.yScale(d._point.yValue)\n const r = d._point.sizePx / 2\n\n ext.minX = Math.min(ext.minX, x - r, labelBBox.x)\n ext.maxX = Math.max(ext.maxX, x + r, labelBBox.x + labelBBox.width)\n ext.minY = Math.min(ext.minY, y - r, labelBBox.y)\n ext.maxY = Math.max(ext.maxY, y + r, labelBBox.y + labelBBox.height)\n return ext\n }, {\n minX: Number.POSITIVE_INFINITY,\n maxX: Number.NEGATIVE_INFINITY,\n minY: Number.POSITIVE_INFINITY,\n maxY: Number.NEGATIVE_INFINITY,\n })\n\n const coeff = 1.2 // Multiplier to take into account subsequent scale range changes and shape irregularities\n const top = extent.minY < yRangeStart ? coeff * (yRangeStart - extent.minY) : 0\n const bottom = extent.maxY > yRangeEnd ? coeff * (extent.maxY - yRangeEnd) : 0\n const left = extent.minX < xRangeStart ? coeff * (xRangeStart - extent.minX) : 0\n const right = extent.maxX > xRangeEnd ? coeff * (extent.maxX - xRangeEnd) : 0\n\n return { top, bottom, left, right }\n }\n\n _render (customDuration?: number): void {\n const { config } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n // Groups\n const pointGroups = this.g\n .selectAll<SVGGElement, ScatterPoint<Datum>[]>(`.${s.pointGroup}`)\n .data(this._pointData)\n\n const pointGroupsEnter = pointGroups\n .enter()\n .append('g')\n .attr('class', s.pointGroup)\n\n const pointGroupsMerged = pointGroupsEnter.merge(pointGroups)\n smartTransition(pointGroupsMerged, duration)\n .style('opacity', 1)\n\n const pointGroupExit = pointGroups.exit().attr('class', s.pointGroupExit)\n smartTransition(pointGroupExit, duration).style('opacity', 0).remove()\n\n // Points\n const points = pointGroupsMerged\n .selectAll<SVGGElement, ScatterPoint<Datum>>(`.${s.point}`)\n .data(\n d => d,\n d => `${getString(d, config.id, d._point.pointIndex) ?? d._point.pointIndex}`\n )\n\n const pointsEnter = points.enter().append('g')\n .attr('class', s.point)\n createPoints(pointsEnter, this.xScale, this.yScale)\n\n this._points = pointsEnter.merge(points)\n updatePoints(this._points, config, this.xScale, this.yScale, duration)\n\n removePoints(points.exit<ScatterPoint<Datum>>(), this.xScale, this.yScale, duration)\n\n // Take care of overlapping labels\n this._collideLabels()\n }\n\n private _collideLabels (): void {\n cancelAnimationFrame(this._collideLabelsAnimFrameId)\n this._collideLabelsAnimFrameId = requestAnimationFrame(() => {\n collideLabels(this._points, this.config, this.xScale, this.yScale)\n })\n }\n\n private _updateSizeScale (): void {\n const { config, datamodel } = this\n\n config.sizeScale\n .domain(getExtent(datamodel.data, config.size))\n .range(config.sizeRange ?? [0, 0])\n }\n\n private _getOnScreenData (): ScatterPoint<Datum>[][] {\n const { config, datamodel: { data } } = this\n\n const xDomain = this.xScale.domain().map(d => +d) // Convert Date to number\n const yDomain = this.yScale.domain().map(d => +d) // Convert Date to number\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n const maxSizeValue = max<number>(flatten(yAccessors.map((y, j) => data?.map(d => getNumber(d, config.size, j)))))\n const maxSizePx = config.sizeRange ? config.sizeScale(maxSizeValue) : maxSizeValue\n const maxSizeXDomain = (this.xScale.invert(maxSizePx) as number) - (this.xScale.invert(0) as number)\n const maxSizeYDomain = Math.abs((this.yScale.invert(maxSizePx) as number) - (this.yScale.invert(0) as number))\n\n return yAccessors.map((y, j) => {\n return data?.reduce<ScatterPoint<Datum>[]>((acc, d, i) => {\n const xValue = getNumber(d, config.x, i)\n const yValue = getNumber(d, y, j)\n const pointSize = getNumber(d, config.size, i)\n const pointSizeScaled = config.sizeRange ? config.sizeScale(pointSize) : pointSize\n const pointSizeXDomain = (this.xScale.invert(pointSizeScaled) as number) - (this.xScale.invert(0) as number)\n const pointSizeYDomain = Math.abs((this.yScale.invert(pointSizeScaled) as number) - (this.yScale.invert(0) as number))\n\n if (\n ((xValue - pointSizeXDomain / 2) >= (xDomain[0] - maxSizeXDomain / 2)) &&\n ((xValue + pointSizeXDomain / 2) <= (xDomain[1] + maxSizeXDomain / 2)) &&\n ((yValue - pointSizeYDomain / 2) >= (yDomain[0] - maxSizeYDomain / 2)) &&\n ((yValue + pointSizeYDomain / 2) <= (yDomain[1] + maxSizeYDomain / 2))\n ) {\n acc.push({\n ...d,\n _point: {\n xValue: xValue,\n yValue: yValue,\n sizePx: pointSizeScaled,\n color: getColor(d, config.color, j),\n shape: getString(d, config.shape, j) as SymbolType,\n label: getString(d, config.label, j),\n labelColor: getValue(d, config.labelColor, j),\n cursor: getString(d, config.cursor, j),\n groupIndex: j,\n pointIndex: i,\n },\n })\n }\n\n return acc\n }, []) ?? []\n })\n }\n\n private _onPointMouseOver (d: ScatterPoint<Datum>, event: MouseEvent): void {\n const point = select(event.target as SVGGElement)\n const pointNode = point.node() as ScatterPointGroupNode | null\n if (pointNode) pointNode._forceShowLabel = true\n\n point.raise()\n this._collideLabels()\n }\n\n private _onPointMouseOut (d: ScatterPoint<Datum>, event: MouseEvent): void {\n const pointNode = select(event.target as SVGGElement).node() as ScatterPointGroupNode | null\n if (pointNode) delete pointNode._forceShowLabel\n\n this._collideLabels()\n }\n}\n"],"names":["s.pointGroup","pointGroupExit","s.pointGroupExit","s.point","s"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { max, min } from 'd3-array'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, getExtent, getNumber, getString, isArray, flatten, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\nimport { SymbolType } from 'types/symbol'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { ScatterPointGroupNode, ScatterPoint } from './types'\n\n// Config\nimport { ScatterConfig, ScatterConfigInterface } from './config'\n\n// Modules\nimport { createPoints, updatePoints, removePoints } from './modules/point'\nimport { collideLabels, getEstimatedLabelBBox } from './modules/utils'\n\n// Styles\nimport * as s from './style'\n\nexport class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfig<Datum>, ScatterConfigInterface<Datum>> {\n static selectors = s\n config: ScatterConfig<Datum> = new ScatterConfig()\n events = {\n [Scatter.selectors.point]: {\n mouseenter: this._onPointMouseOver.bind(this),\n mouseleave: this._onPointMouseOut.bind(this),\n },\n }\n\n private _pointData: ScatterPoint<Datum>[][] = []\n private _points: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>\n private _collideLabelsAnimFrameId: ReturnType<typeof requestAnimationFrame>\n\n constructor (config?: ScatterConfigInterface<Datum>) {\n super()\n if (config) this.setConfig(config)\n }\n\n setConfig (config: ScatterConfigInterface<Datum>): void {\n super.setConfig(config)\n this._updateSizeScale()\n }\n\n setData (data: Datum[]): void {\n super.setData(data)\n this._updateSizeScale()\n }\n\n get bleed (): Spacing {\n this._pointData = this._getOnScreenData()\n const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)\n\n const yRangeStart = min(this.yScale.range())\n const yRangeEnd = max(this.yScale.range())\n const xRangeStart = this.xScale.range()[0]\n const xRangeEnd = this.xScale.range()[1]\n\n const fontSizePx = getCSSVariableValueInPixels('var(--vis-scatter-point-label-text-font-size)', this.element)\n\n const extent = pointDataFlat.reduce((ext, d) => {\n const labelPosition = getValue(d, this.config.labelPosition, d._point.pointIndex)\n const labelBBox = getEstimatedLabelBBox(d, labelPosition, this.xScale, this.yScale, fontSizePx)\n const x = this.xScale(d._point.xValue)\n const y = this.yScale(d._point.yValue)\n const r = d._point.sizePx / 2\n\n ext.minX = Math.min(ext.minX, x - r, labelBBox.x)\n ext.maxX = Math.max(ext.maxX, x + r, labelBBox.x + labelBBox.width)\n ext.minY = Math.min(ext.minY, y - r, labelBBox.y)\n ext.maxY = Math.max(ext.maxY, y + r, labelBBox.y + labelBBox.height)\n return ext\n }, {\n minX: Number.POSITIVE_INFINITY,\n maxX: Number.NEGATIVE_INFINITY,\n minY: Number.POSITIVE_INFINITY,\n maxY: Number.NEGATIVE_INFINITY,\n })\n\n const coeff = 1.2 // Multiplier to take into account subsequent scale range changes and shape irregularities\n const top = extent.minY < yRangeStart ? coeff * (yRangeStart - extent.minY) : 0\n const bottom = extent.maxY > yRangeEnd ? coeff * (extent.maxY - yRangeEnd) : 0\n const left = extent.minX < xRangeStart ? coeff * (xRangeStart - extent.minX) : 0\n const right = extent.maxX > xRangeEnd ? coeff * (extent.maxX - xRangeEnd) : 0\n\n return { top, bottom, left, right }\n }\n\n _render (customDuration?: number): void {\n const { config } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n // Groups\n const pointGroups = this.g\n .selectAll<SVGGElement, ScatterPoint<Datum>[]>(`.${s.pointGroup}`)\n .data(this._pointData)\n\n const pointGroupsEnter = pointGroups\n .enter()\n .append('g')\n .attr('class', s.pointGroup)\n\n const pointGroupsMerged = pointGroupsEnter.merge(pointGroups)\n smartTransition(pointGroupsMerged, duration)\n .style('opacity', 1)\n\n const pointGroupExit = pointGroups.exit().attr('class', s.pointGroupExit)\n smartTransition(pointGroupExit, duration).style('opacity', 0).remove()\n\n // Points\n const points = pointGroupsMerged\n .selectAll<SVGGElement, ScatterPoint<Datum>>(`.${s.point}`)\n .data(\n d => d,\n d => `${getString(d, config.id, d._point.pointIndex) ?? d._point.pointIndex}`\n )\n\n const pointsEnter = points.enter().append('g')\n .attr('class', s.point)\n createPoints(pointsEnter, this.xScale, this.yScale)\n\n this._points = pointsEnter.merge(points)\n updatePoints(this._points, config, this.xScale, this.yScale, duration)\n\n removePoints(points.exit<ScatterPoint<Datum>>(), this.xScale, this.yScale, duration)\n\n // Take care of overlapping labels\n this._collideLabels()\n }\n\n private _collideLabels (): void {\n cancelAnimationFrame(this._collideLabelsAnimFrameId)\n this._collideLabelsAnimFrameId = requestAnimationFrame(() => {\n collideLabels(this._points, this.config, this.xScale, this.yScale)\n })\n }\n\n private _updateSizeScale (): void {\n const { config, datamodel } = this\n\n config.sizeScale\n .domain(getExtent(datamodel.data, config.size))\n .range(config.sizeRange ?? [0, 0])\n }\n\n private _getOnScreenData (): ScatterPoint<Datum>[][] {\n const { config, datamodel: { data } } = this\n\n const xDomain = this.xScale.domain().map(d => +d) // Convert Date to number\n const yDomain = this.yScale.domain().map(d => +d) // Convert Date to number\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n const maxSizeValue = max<number>(flatten(yAccessors.map((y, j) => data?.map(d => getNumber(d, config.size, j)))))\n const maxSizePx = config.sizeRange ? config.sizeScale(maxSizeValue) : maxSizeValue\n const maxSizeXDomain = (this.xScale.invert(maxSizePx) as number) - (this.xScale.invert(0) as number)\n const maxSizeYDomain = Math.abs((this.yScale.invert(maxSizePx) as number) - (this.yScale.invert(0) as number))\n\n return yAccessors.map((y, j) => {\n return data?.reduce<ScatterPoint<Datum>[]>((acc, d, i) => {\n const xValue = getNumber(d, config.x, i)\n const yValue = getNumber(d, y, j)\n const pointSize = getNumber(d, config.size, i)\n const pointSizeScaled = config.sizeRange ? config.sizeScale(pointSize) : pointSize\n const pointSizeXDomain = (this.xScale.invert(pointSizeScaled) as number) - (this.xScale.invert(0) as number)\n const pointSizeYDomain = Math.abs((this.yScale.invert(pointSizeScaled) as number) - (this.yScale.invert(0) as number))\n\n if (\n ((xValue - pointSizeXDomain / 2) >= (xDomain[0] - maxSizeXDomain / 2)) &&\n ((xValue + pointSizeXDomain / 2) <= (xDomain[1] + maxSizeXDomain / 2)) &&\n ((yValue - pointSizeYDomain / 2) >= (yDomain[0] - maxSizeYDomain / 2)) &&\n ((yValue + pointSizeYDomain / 2) <= (yDomain[1] + maxSizeYDomain / 2))\n ) {\n acc.push({\n ...d,\n _point: {\n xValue: xValue,\n yValue: yValue,\n sizePx: pointSizeScaled,\n color: getColor(d, config.color, j),\n strokeColor: getColor(d, config.strokeColor, j, true),\n strokeWidthPx: getNumber(d, config.strokeWidth, j),\n shape: getString(d, config.shape, j) as SymbolType,\n label: getString(d, config.label, j),\n labelColor: getValue(d, config.labelColor, j),\n cursor: getString(d, config.cursor, j),\n groupIndex: j,\n pointIndex: i,\n },\n })\n }\n\n return acc\n }, []) ?? []\n })\n }\n\n private _onPointMouseOver (d: ScatterPoint<Datum>, event: MouseEvent): void {\n const point = select(event.target as SVGGElement)\n const pointNode = point.node() as ScatterPointGroupNode | null\n if (pointNode) pointNode._forceShowLabel = true\n\n point.raise()\n this._collideLabels()\n }\n\n private _onPointMouseOut (d: ScatterPoint<Datum>, event: MouseEvent): void {\n const pointNode = select(event.target as SVGGElement).node() as ScatterPointGroupNode | null\n if (pointNode) delete pointNode._forceShowLabel\n\n this._collideLabels()\n }\n}\n"],"names":["s.pointGroup","pointGroupExit","s.pointGroupExit","s.point","s"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ function createPoints(selection, xScale, yScale) {
|
|
|
19
19
|
function updatePoints(selection, config, xScale, yScale, duration) {
|
|
20
20
|
const symbolGenerator = symbol();
|
|
21
21
|
selection.each((d, index, elements) => {
|
|
22
|
-
var _a, _b;
|
|
22
|
+
var _a, _b, _c, _d;
|
|
23
23
|
const i = d._point.pointIndex;
|
|
24
24
|
const group = select(elements[index]);
|
|
25
25
|
const label = group.select('text');
|
|
@@ -27,6 +27,8 @@ function updatePoints(selection, config, xScale, yScale, duration) {
|
|
|
27
27
|
// Shape
|
|
28
28
|
const pointDiameter = d._point.sizePx;
|
|
29
29
|
const pointColor = d._point.color;
|
|
30
|
+
const pointStrokeColor = (_a = d._point.strokeColor) !== null && _a !== void 0 ? _a : null;
|
|
31
|
+
const pointStrokeWidth = (_b = d._point.strokeWidthPx) !== null && _b !== void 0 ? _b : null;
|
|
30
32
|
path.attr('d', () => {
|
|
31
33
|
const svgPath = d._point.shape ? symbolGenerator
|
|
32
34
|
.size(Math.PI * pointDiameter * pointDiameter / 4)
|
|
@@ -35,18 +37,19 @@ function updatePoints(selection, config, xScale, yScale, duration) {
|
|
|
35
37
|
});
|
|
36
38
|
smartTransition(path, duration)
|
|
37
39
|
.style('fill', pointColor)
|
|
38
|
-
.style('stroke',
|
|
40
|
+
.style('stroke', pointStrokeColor)
|
|
41
|
+
.style('stroke-width', `${pointStrokeWidth}px`);
|
|
39
42
|
// Label
|
|
40
43
|
const labelPosition = getValue(d, config.labelPosition, i);
|
|
41
44
|
const isLabelPositionCenter = (labelPosition !== Position.Top) && (labelPosition !== Position.Bottom) &&
|
|
42
45
|
(labelPosition !== Position.Left) && (labelPosition !== Position.Right);
|
|
43
|
-
const pointLabelText = (
|
|
46
|
+
const pointLabelText = (_c = d._point.label) !== null && _c !== void 0 ? _c : '';
|
|
44
47
|
const textLength = pointLabelText.length;
|
|
45
48
|
const centralLabelFontSize = getCentralLabelFontSize(pointDiameter, textLength);
|
|
46
49
|
let labelColor = d._point.labelColor;
|
|
47
50
|
if (!labelColor && isLabelPositionCenter) {
|
|
48
51
|
const c = pointColor || 'var(--vis-scatter-fill-color)';
|
|
49
|
-
const hex = (
|
|
52
|
+
const hex = (_d = color(isStringCSSVariable(c) ? getCSSVariableValue(c, group.node()) : c)) === null || _d === void 0 ? void 0 : _d.hex();
|
|
50
53
|
const brightness = hexToBrightness(hex);
|
|
51
54
|
labelColor = brightness > config.labelTextBrightnessRatio ? 'var(--vis-scatter-point-label-text-color-dark)' : 'var(--vis-scatter-point-label-text-color-light)';
|
|
52
55
|
}
|
|
@@ -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[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',
|
|
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 const pointStrokeColor = d._point.strokeColor ?? null\n const pointStrokeWidth = d._point.strokeWidthPx ?? null\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', pointStrokeColor)\n .style('stroke-width', `${pointStrokeWidth}px`)\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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"}
|
|
@@ -4,8 +4,8 @@ const globalStyles = injectGlobal `
|
|
|
4
4
|
:root {
|
|
5
5
|
--vis-scatter-cursor: default;
|
|
6
6
|
--vis-scatter-fill-color: var(--vis-color-main);
|
|
7
|
-
--vis-scatter-stroke-color:
|
|
8
|
-
--vis-scatter-stroke-width:
|
|
7
|
+
--vis-scatter-stroke-color: 'none';
|
|
8
|
+
--vis-scatter-stroke-width: 1px;
|
|
9
9
|
--vis-scatter-fill-opacity: 1;
|
|
10
10
|
--vis-scatter-stroke-opacity: 1;
|
|
11
11
|
--vis-scatter-hover-stroke-width: 2px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/scatter/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-scatter-cursor: default;\n --vis-scatter-fill-color: var(--vis-color-main);\n --vis-scatter-stroke-color:
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/scatter/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-scatter-cursor: default;\n --vis-scatter-fill-color: var(--vis-color-main);\n --vis-scatter-stroke-color: 'none';\n --vis-scatter-stroke-width: 1px;\n --vis-scatter-fill-opacity: 1;\n --vis-scatter-stroke-opacity: 1;\n --vis-scatter-hover-stroke-width: 2px;\n\n --vis-scatter-point-label-text-color-dark: #5b5f6d;\n --vis-scatter-point-label-text-color-light: #fff;\n --vis-scatter-point-label-text-font-weight: 500;\n --vis-scatter-point-label-text-font-size: 12px;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-scatter-point-label-text-font-family: */\n }\n`\n\nexport const root = css`\n label: scatter-component;\n`\n\nexport const pointGroup = css`\n label: point-group;\n`\n\nexport const pointGroupExit = css`\n label: point-group-exit;\n`\n\nexport const point = css`\n label: point;\n\n > path {\n cursor: var(--vis-scatter-cursor);\n fill: var(--vis-scatter-fill-color);\n fill-opacity: var(--vis-scatter-fill-opacity);\n stroke-opacity: var(--vis-scatter-stroke-opacity);\n stroke-width: var(--vis-scatter-stroke-width);\n stroke: var(--vis-scatter-stroke-color);\n\n &:hover {\n stroke-width: var(--vis-scatter-hover-stroke-width);\n }\n }\n\n > text {\n font-weight: var(--vis-scatter-point-label-text-font-weight);\n font-size: var(--vis-scatter-point-label-text-font-size);\n font-family: var(--vis-scatter-point-label-text-font-family, var(--vis-font-family));\n fill: var(--vis-scatter-point-label-text-color-dark);\n user-select: none;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
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.14",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|