@unovis/ts 1.4.1-alpha.2 → 1.4.1-alpha.3
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/bullet-legend/index.js +3 -2
- package/components/bullet-legend/index.js.map +1 -1
- package/components/bullet-legend/modules/shape.js +7 -6
- package/components/bullet-legend/modules/shape.js.map +1 -1
- package/components/bullet-legend/style.js +1 -4
- package/components/bullet-legend/style.js.map +1 -1
- package/package.json +1 -1
|
@@ -27,12 +27,13 @@ class BulletLegend {
|
|
|
27
27
|
const { config } = this;
|
|
28
28
|
const legendItems = this.div.selectAll(`.${item}`).data(config.items);
|
|
29
29
|
const legendItemsEnter = legendItems.enter().append('div')
|
|
30
|
-
.attr('class', d => { var _a; return `${item} ${(_a = d.className) !== null && _a !== void 0 ? _a : ''}`; })
|
|
31
|
-
.classed(itemVertical, config.orientation === BulletLegendOrientation.Vertical)
|
|
32
30
|
.on('click', this._onItemClick.bind(this));
|
|
33
31
|
const legendItemsMerged = legendItemsEnter.merge(legendItems);
|
|
34
32
|
legendItemsMerged
|
|
33
|
+
.attr('class', d => { var _a; return `${item} ${(_a = d.className) !== null && _a !== void 0 ? _a : ''}`; })
|
|
34
|
+
.classed(itemVertical, config.orientation === BulletLegendOrientation.Vertical)
|
|
35
35
|
.classed(clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))
|
|
36
|
+
.attr('title', d => d.name)
|
|
36
37
|
.style('display', (d) => d.hidden ? 'none' : null);
|
|
37
38
|
// Bullet
|
|
38
39
|
legendItemsEnter.append('span')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Config\nimport { BulletLegendDefaultConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface, BulletLegendOrientation } from './types'\n\n// Modules\nimport { createBullets, updateBullets } from './modules/shape'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n static selectors = s\n protected _defaultConfig = BulletLegendDefaultConfig as BulletLegendConfigInterface\n public config: BulletLegendConfigInterface = this._defaultConfig\n\n div: Selection<HTMLElement, unknown, null, undefined>\n element: HTMLElement\n prevConfig: BulletLegendConfigInterface\n protected _container: HTMLElement\n\n private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n this._container = element\n\n this.div = config?.renderIntoProvidedDomNode ? select(this._container) : select(this._container).append<HTMLElement>('div')\n this.div.classed(s.root, true)\n\n this.element = this.div.node()\n\n if (config) this.update(config)\n }\n\n update (config: BulletLegendConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n this.render()\n }\n\n render (): void {\n const { config } = this\n\n const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`).data(config.items)\n\n const legendItemsEnter = legendItems.enter().append('div')\n .attr('class', d => `${s.item} ${d.className ?? ''}`)\n .classed(s.itemVertical, config.orientation === BulletLegendOrientation.Vertical)\n .
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Config\nimport { BulletLegendDefaultConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface, BulletLegendOrientation } from './types'\n\n// Modules\nimport { createBullets, updateBullets } from './modules/shape'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n static selectors = s\n protected _defaultConfig = BulletLegendDefaultConfig as BulletLegendConfigInterface\n public config: BulletLegendConfigInterface = this._defaultConfig\n\n div: Selection<HTMLElement, unknown, null, undefined>\n element: HTMLElement\n prevConfig: BulletLegendConfigInterface\n protected _container: HTMLElement\n\n private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n this._container = element\n\n this.div = config?.renderIntoProvidedDomNode ? select(this._container) : select(this._container).append<HTMLElement>('div')\n this.div.classed(s.root, true)\n\n this.element = this.div.node()\n\n if (config) this.update(config)\n }\n\n update (config: BulletLegendConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n this.render()\n }\n\n render (): void {\n const { config } = this\n\n const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`).data(config.items)\n\n const legendItemsEnter = legendItems.enter().append('div')\n .on('click', this._onItemClick.bind(this))\n\n const legendItemsMerged = legendItemsEnter.merge(legendItems)\n legendItemsMerged\n .attr('class', d => `${s.item} ${d.className ?? ''}`)\n .classed(s.itemVertical, config.orientation === BulletLegendOrientation.Vertical)\n .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n .attr('title', d => d.name)\n .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n\n // Bullet\n legendItemsEnter.append('span')\n .attr('class', s.bullet)\n .call(createBullets)\n\n legendItemsMerged.select<SVGElement>(`.${s.bullet}`)\n .style('width', config.bulletSize)\n .style('height', config.bulletSize)\n .style('box-sizing', 'content-box')\n .call(updateBullets, this.config, this._colorAccessor)\n\n // Labels\n legendItemsEnter.append('span')\n .attr('class', s.label)\n .classed(config.labelClassName, true)\n .style('max-width', config.labelMaxWidth)\n .style('font-size', config.labelFontSize)\n\n legendItemsMerged.select(`.${s.label}`)\n .text((d: BulletLegendItemInterface) => d.name)\n\n legendItems.exit().remove()\n }\n\n _isItemClickable (item: BulletLegendItemInterface): boolean {\n return item.pointer === undefined ? true : item.pointer\n }\n\n _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n const { config: { onLegendItemClick } } = this\n\n const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n if (onLegendItemClick) onLegendItemClick(d, index)\n }\n\n public destroy (): void {\n if (this.element !== this._container) this.div.remove()\n }\n}\n"],"names":["s.root","s.item","s.itemVertical","s.clickable","s.bullet","s.label","s"],"mappings":"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"}
|
|
@@ -34,14 +34,15 @@ function updateBullets(container, config, colorAccessor) {
|
|
|
34
34
|
const width = BULLET_SIZE;
|
|
35
35
|
const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE;
|
|
36
36
|
const selection = select(els[i]).select('svg')
|
|
37
|
-
.attr('viewBox', `0 0 ${width} ${height}`)
|
|
38
|
-
|
|
37
|
+
.attr('viewBox', `0 0 ${width} ${height}`);
|
|
38
|
+
const bulletPath = selection.select('path')
|
|
39
39
|
.attr('stroke', color);
|
|
40
|
+
const opacity = d.inactive ? 'var(--vis-legend-bullet-inactive-opacity)' : 1;
|
|
40
41
|
if (shape === BulletShape.Line) {
|
|
41
|
-
|
|
42
|
+
bulletPath
|
|
42
43
|
.attr('d', `M0,${height / 2} L${width / 2},${height / 2} L${width},${height / 2}`)
|
|
43
44
|
.attr('transform', null)
|
|
44
|
-
.style('opacity',
|
|
45
|
+
.style('opacity', opacity)
|
|
45
46
|
.style('stroke-width', '3px')
|
|
46
47
|
.style('fill', null)
|
|
47
48
|
.style('fill-opacity', null)
|
|
@@ -65,13 +66,13 @@ function updateBullets(container, config, colorAccessor) {
|
|
|
65
66
|
dy -= height / 16;
|
|
66
67
|
break;
|
|
67
68
|
}
|
|
68
|
-
|
|
69
|
+
bulletPath
|
|
69
70
|
.attr('d', symbolGen)
|
|
70
71
|
.attr('transform', `translate(${width / 2}, ${Math.round(dy)}) scale(${scale})`)
|
|
71
72
|
.style('stroke-width', '1px')
|
|
72
73
|
.style('opacity', null)
|
|
73
74
|
.style('fill', color)
|
|
74
|
-
.style('fill-opacity',
|
|
75
|
+
.style('fill-opacity', opacity);
|
|
75
76
|
}
|
|
76
77
|
});
|
|
77
78
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shape.js","sources":["../../../../src/components/bullet-legend/modules/shape.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { symbol } from 'd3-shape'\n\n// Types\nimport { ColorAccessor } from 'types/accessor'\nimport { Symbol, SymbolType } from 'types/symbol'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { getString } from 'utils/data'\n\n// Constants\nimport { PATTERN_SIZE_PX } from 'styles/patterns'\n\n// Local types\nimport { BulletLegendConfigInterface } from '../config'\nimport { BulletShape, BulletLegendItemInterface } from '../types'\n\n// Size with respect to the viewBox. We use this to compute path data which is independent of the\n// the configured size.\nconst BULLET_SIZE = PATTERN_SIZE_PX * 3\n\n// Different shapes need different scaling to fit the full size\nconst shapeScale: Record<SymbolType, number> = {\n [BulletShape.Circle]: Math.PI / 4,\n [BulletShape.Cross]: 5 / 9,\n [BulletShape.Diamond]: Math.sqrt(3) / 6,\n [BulletShape.Square]: 1,\n [BulletShape.Star]: 0.3,\n [BulletShape.Triangle]: Math.sqrt(3) / 4,\n [BulletShape.Wye]: 5 / 11,\n}\n\nexport function createBullets (\n container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLElement, unknown>\n): void {\n container.each((d, i, els) => {\n select(els[i]).append('svg')\n .attr('width', '100%')\n .attr('height', '100%')\n .append('path')\n })\n}\n\nexport function updateBullets (\n container: Selection<SVGElement, BulletLegendItemInterface, HTMLElement, unknown>,\n config: BulletLegendConfigInterface,\n colorAccessor: ColorAccessor<BulletLegendItemInterface>\n): void {\n container.each((d, i, els) => {\n const shape = getString(d, config.bulletShape, i) as BulletShape\n const color = getColor(d, colorAccessor, i)\n const width = BULLET_SIZE\n const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE\n\n const selection = select(els[i]).select('svg')\n .attr('viewBox', `0 0 ${width} ${height}`)\n
|
|
1
|
+
{"version":3,"file":"shape.js","sources":["../../../../src/components/bullet-legend/modules/shape.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { symbol } from 'd3-shape'\n\n// Types\nimport { ColorAccessor } from 'types/accessor'\nimport { Symbol, SymbolType } from 'types/symbol'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { getString } from 'utils/data'\n\n// Constants\nimport { PATTERN_SIZE_PX } from 'styles/patterns'\n\n// Local types\nimport { BulletLegendConfigInterface } from '../config'\nimport { BulletShape, BulletLegendItemInterface } from '../types'\n\n// Size with respect to the viewBox. We use this to compute path data which is independent of the\n// the configured size.\nconst BULLET_SIZE = PATTERN_SIZE_PX * 3\n\n// Different shapes need different scaling to fit the full size\nconst shapeScale: Record<SymbolType, number> = {\n [BulletShape.Circle]: Math.PI / 4,\n [BulletShape.Cross]: 5 / 9,\n [BulletShape.Diamond]: Math.sqrt(3) / 6,\n [BulletShape.Square]: 1,\n [BulletShape.Star]: 0.3,\n [BulletShape.Triangle]: Math.sqrt(3) / 4,\n [BulletShape.Wye]: 5 / 11,\n}\n\nexport function createBullets (\n container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLElement, unknown>\n): void {\n container.each((d, i, els) => {\n select(els[i]).append('svg')\n .attr('width', '100%')\n .attr('height', '100%')\n .append('path')\n })\n}\n\nexport function updateBullets (\n container: Selection<SVGElement, BulletLegendItemInterface, HTMLElement, unknown>,\n config: BulletLegendConfigInterface,\n colorAccessor: ColorAccessor<BulletLegendItemInterface>\n): void {\n container.each((d, i, els) => {\n const shape = getString(d, config.bulletShape, i) as BulletShape\n const color = getColor(d, colorAccessor, i)\n const width = BULLET_SIZE\n const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE\n\n const selection = select(els[i]).select('svg')\n .attr('viewBox', `0 0 ${width} ${height}`)\n\n const bulletPath = selection.select<SVGPathElement>('path')\n .attr('stroke', color)\n\n const opacity = d.inactive ? 'var(--vis-legend-bullet-inactive-opacity)' : 1\n if (shape === BulletShape.Line) {\n bulletPath\n .attr('d', `M0,${height / 2} L${width / 2},${height / 2} L${width},${height / 2}`)\n .attr('transform', null)\n .style('opacity', opacity)\n .style('stroke-width', '3px')\n .style('fill', null)\n .style('fill-opacity', null)\n .style('marker-start', 'none')\n .style('marker-end', 'none')\n } else {\n const symbolGen = symbol()\n .type(Symbol[shape])\n .size(width * height * shapeScale[shape])\n\n const scale = (width - 2) / width\n let dy = height / 2\n switch (shape) {\n case BulletShape.Triangle:\n dy += height / 8\n break\n case BulletShape.Star:\n dy += height / 16\n break\n case BulletShape.Wye:\n dy -= height / 16\n break\n }\n\n bulletPath\n .attr('d', symbolGen)\n .attr('transform', `translate(${width / 2}, ${Math.round(dy)}) scale(${scale})`)\n .style('stroke-width', '1px')\n .style('opacity', null)\n .style('fill', color)\n .style('fill-opacity', opacity)\n }\n })\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -12,18 +12,16 @@ const variables = injectGlobal `
|
|
|
12
12
|
--vis-legend-label-max-width: 300px;
|
|
13
13
|
--vis-legend-label-font-size: 12px;
|
|
14
14
|
--vis-legend-bullet-size: 9px;
|
|
15
|
-
--vis-legend-bullet-inactive-
|
|
15
|
+
--vis-legend-bullet-inactive-opacity: 0.15;
|
|
16
16
|
--vis-legend-item-spacing: 20px;
|
|
17
17
|
--vis-legend-vertical-item-spacing: 5px;
|
|
18
18
|
--vis-legend-bullet-label-spacing: 8px;
|
|
19
19
|
|
|
20
20
|
--vis-dark-legend-label-color: #eee;
|
|
21
|
-
--vis-dark-legend-bullet-inactive-color: #6c778c;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
body.theme-dark ${`.${root}`} {
|
|
25
24
|
--vis-legend-label-color: var(--vis-dark-legend-label-color);
|
|
26
|
-
--vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-color);
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
body.theme-patterns {
|
|
@@ -70,7 +68,6 @@ const bullet = css `
|
|
|
70
68
|
svg {
|
|
71
69
|
display: block;
|
|
72
70
|
}
|
|
73
|
-
}
|
|
74
71
|
`;
|
|
75
72
|
|
|
76
73
|
export { bullet, clickable, item, itemVertical, label, root, variables };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-legend-font-family: */\n\n --vis-legend-label-color: #6c778c;\n --vis-legend-label-max-width: 300px;\n --vis-legend-label-font-size: 12px;\n --vis-legend-bullet-size: 9px;\n --vis-legend-bullet-inactive-
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-legend-font-family: */\n\n --vis-legend-label-color: #6c778c;\n --vis-legend-label-max-width: 300px;\n --vis-legend-label-font-size: 12px;\n --vis-legend-bullet-size: 9px;\n --vis-legend-bullet-inactive-opacity: 0.15;\n --vis-legend-item-spacing: 20px;\n --vis-legend-vertical-item-spacing: 5px;\n --vis-legend-bullet-label-spacing: 8px;\n\n --vis-dark-legend-label-color: #eee;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-legend-label-color: var(--vis-dark-legend-label-color);\n }\n\n body.theme-patterns {\n --vis-legend-bullet-size: 14px;\n }\n`\n\nexport const item = css`\n label: legendItem;\n display: inline-flex;\n align-items: center;\n font-family: var(--vis-legend-font-family, var(--vis-font-family));\n margin-right: var(--vis-legend-item-spacing);\n white-space: nowrap;\n cursor: default;\n user-select: none;\n max-width: min-content;\n`\n\nexport const itemVertical = css`\n label: legendItemVertical;\n display: flex;\n margin-top: var(--vis-legend-vertical-item-spacing);\n`\n\nexport const clickable = css`\n cursor: pointer;\n`\n\nexport const label = css`\n label: legendItemLabel;\n font-size: var(--vis-legend-label-font-size);\n display: inline-block;\n vertical-align: middle;\n color: var(--vis-legend-label-color);\n max-width: var(--vis-legend-label-max-width);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`\n\nexport const bullet = css`\n flex: 0 0 auto;\n label: legendItemBullet;\n margin-right: var(--vis-legend-bullet-label-spacing);\n height: var(--vis-legend-bullet-size);\n width: var(--vis-legend-bullet-size);\n\n svg {\n display: block;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;AAiBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;EAO7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;EAI9B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,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.4.1-alpha.
|
|
4
|
+
"version": "1.4.1-alpha.3",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|