@unovis/ts 1.4.1-alpha.0 → 1.4.1-alpha.2
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.
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { select } from 'd3-selection';
|
|
2
|
-
import { cx } from '@emotion/css';
|
|
3
2
|
import { merge } from '../../utils/data.js';
|
|
4
3
|
import { BulletLegendDefaultConfig } from './config.js';
|
|
5
4
|
import { BulletLegendOrientation } from './types.js';
|
|
@@ -14,7 +13,7 @@ class BulletLegend {
|
|
|
14
13
|
this._colorAccessor = (d) => d.color;
|
|
15
14
|
this._container = element;
|
|
16
15
|
this.div = (config === null || config === void 0 ? void 0 : config.renderIntoProvidedDomNode) ? select(this._container) : select(this._container).append('div');
|
|
17
|
-
this.div.
|
|
16
|
+
this.div.classed(root, true);
|
|
18
17
|
this.element = this.div.node();
|
|
19
18
|
if (config)
|
|
20
19
|
this.update(config);
|
|
@@ -28,7 +27,8 @@ class BulletLegend {
|
|
|
28
27
|
const { config } = this;
|
|
29
28
|
const legendItems = this.div.selectAll(`.${item}`).data(config.items);
|
|
30
29
|
const legendItemsEnter = legendItems.enter().append('div')
|
|
31
|
-
.attr('class', d =>
|
|
30
|
+
.attr('class', d => { var _a; return `${item} ${(_a = d.className) !== null && _a !== void 0 ? _a : ''}`; })
|
|
31
|
+
.classed(itemVertical, config.orientation === BulletLegendOrientation.Vertical)
|
|
32
32
|
.on('click', this._onItemClick.bind(this));
|
|
33
33
|
const legendItemsMerged = legendItemsEnter.merge(legendItems);
|
|
34
34
|
legendItemsMerged
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\
|
|
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 .on('click', this._onItemClick.bind(this))\n\n const legendItemsMerged = legendItemsEnter.merge(legendItems)\n legendItemsMerged\n .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\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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"}
|
|
@@ -14,6 +14,7 @@ const variables = injectGlobal `
|
|
|
14
14
|
--vis-legend-bullet-size: 9px;
|
|
15
15
|
--vis-legend-bullet-inactive-color: #eee;
|
|
16
16
|
--vis-legend-item-spacing: 20px;
|
|
17
|
+
--vis-legend-vertical-item-spacing: 5px;
|
|
17
18
|
--vis-legend-bullet-label-spacing: 8px;
|
|
18
19
|
|
|
19
20
|
--vis-dark-legend-label-color: #eee;
|
|
@@ -43,6 +44,7 @@ const item = css `
|
|
|
43
44
|
const itemVertical = css `
|
|
44
45
|
label: legendItemVertical;
|
|
45
46
|
display: flex;
|
|
47
|
+
margin-top: var(--vis-legend-vertical-item-spacing);
|
|
46
48
|
`;
|
|
47
49
|
const clickable = css `
|
|
48
50
|
cursor: pointer;
|
|
@@ -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-color: #eee;\n --vis-legend-item-spacing: 20px;\n --vis-legend-bullet-label-spacing: 8px;\n\n --vis-dark-legend-label-color: #eee;\n --vis-dark-legend-bullet-inactive-color: #6c778c;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-legend-label-color: var(--vis-dark-legend-label-color);\n --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-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`\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`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA
|
|
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-color: #eee;\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 --vis-dark-legend-bullet-inactive-color: #6c778c;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-legend-label-color: var(--vis-dark-legend-label-color);\n --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-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`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;EAQ7B;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.2",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|