@unovis/ts 1.3.0-alpha.3 → 1.3.0-alpha.4
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/config.d.ts +5 -2
- package/components/bullet-legend/config.js +2 -0
- package/components/bullet-legend/config.js.map +1 -1
- package/components/bullet-legend/index.js +6 -16
- package/components/bullet-legend/index.js.map +1 -1
- package/components/bullet-legend/modules/shape.d.ts +6 -0
- package/components/bullet-legend/modules/shape.js +58 -0
- package/components/bullet-legend/modules/shape.js.map +1 -0
- package/components/bullet-legend/style.js +6 -9
- package/components/bullet-legend/style.js.map +1 -1
- package/components/bullet-legend/types.d.ts +5 -0
- package/components/bullet-legend/types.js +7 -0
- package/components/bullet-legend/types.js.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/types.js +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Config } from "../../core/config";
|
|
2
|
-
import { BulletLegendItemInterface } from './types';
|
|
2
|
+
import { BulletLegendItemInterface, BulletShape } from './types';
|
|
3
3
|
export interface BulletLegendConfigInterface {
|
|
4
4
|
/** Legend items. Array of `BulletLegendItemInterface`:
|
|
5
5
|
* ```
|
|
@@ -21,8 +21,10 @@ export interface BulletLegendConfigInterface {
|
|
|
21
21
|
labelFontSize?: string | null;
|
|
22
22
|
/** Label text (<span> element) max-width CSS property. Default: `null` */
|
|
23
23
|
labelMaxWidth?: string | null;
|
|
24
|
-
/** Bullet
|
|
24
|
+
/** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */
|
|
25
25
|
bulletSize?: string | null;
|
|
26
|
+
/** Bullet shape: `BulletShape.Circle`, `BulletShape.Line` or `BulletShape.Square`. Default: `BulletShape.Circle` */
|
|
27
|
+
bulletShape?: BulletShape;
|
|
26
28
|
}
|
|
27
29
|
export declare class BulletLegendConfig extends Config implements BulletLegendConfigInterface {
|
|
28
30
|
items: BulletLegendItemInterface[];
|
|
@@ -31,4 +33,5 @@ export declare class BulletLegendConfig extends Config implements BulletLegendCo
|
|
|
31
33
|
labelFontSize: any;
|
|
32
34
|
labelMaxWidth: any;
|
|
33
35
|
bulletSize: any;
|
|
36
|
+
bulletShape: BulletShape;
|
|
34
37
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Config } from '../../core/config/index.js';
|
|
2
|
+
import { BulletShape } from './types.js';
|
|
2
3
|
|
|
3
4
|
class BulletLegendConfig extends Config {
|
|
4
5
|
constructor() {
|
|
@@ -9,6 +10,7 @@ class BulletLegendConfig extends Config {
|
|
|
9
10
|
this.labelFontSize = null;
|
|
10
11
|
this.labelMaxWidth = null;
|
|
11
12
|
this.bulletSize = null;
|
|
13
|
+
this.bulletShape = BulletShape.Circle;
|
|
12
14
|
}
|
|
13
15
|
}
|
|
14
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\nexport interface BulletLegendConfigInterface {\n /** Legend items. Array of `BulletLegendItemInterface`:\n * ```\n * {\n * name: string | number;\n * color?: string;\n * inactive?: boolean;\n * hidden?: boolean;\n * pointer?: boolean;\n * }\n * ```\n * Default: `[]` */\n items: BulletLegendItemInterface[];\n /** Apply a specific class to the labels. Default: `''` */\n labelClassName?: string;\n /** Callback function for the legend item click. Default: `undefined` */\n onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n /** Label text (<span> element) font-size CSS. Default: `null` */\n labelFontSize?: string | null;\n /** Label text (<span> element) max-width CSS property. Default: `null` */\n labelMaxWidth?: string | null;\n /** Bullet
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["import { Config } from 'core/config'\n\n// Local Types\nimport { BulletLegendItemInterface, BulletShape } from './types'\n\nexport interface BulletLegendConfigInterface {\n /** Legend items. Array of `BulletLegendItemInterface`:\n * ```\n * {\n * name: string | number;\n * color?: string;\n * inactive?: boolean;\n * hidden?: boolean;\n * pointer?: boolean;\n * }\n * ```\n * Default: `[]` */\n items: BulletLegendItemInterface[];\n /** Apply a specific class to the labels. Default: `''` */\n labelClassName?: string;\n /** Callback function for the legend item click. Default: `undefined` */\n onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n /** Label text (<span> element) font-size CSS. Default: `null` */\n labelFontSize?: string | null;\n /** Label text (<span> element) max-width CSS property. Default: `null` */\n labelMaxWidth?: string | null;\n /** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */\n bulletSize?: string | null;\n /** Bullet shape: `BulletShape.Circle`, `BulletShape.Line` or `BulletShape.Square`. Default: `BulletShape.Circle` */\n bulletShape?: BulletShape;\n}\n\nexport class BulletLegendConfig extends Config implements BulletLegendConfigInterface {\n items: BulletLegendItemInterface[] = []\n labelClassName = ''\n onLegendItemClick = undefined\n labelFontSize = null\n labelMaxWidth = null\n bulletSize = null\n bulletShape = BulletShape.Circle\n}\n"],"names":[],"mappings":";;;AAgCM,MAAO,kBAAmB,SAAQ,MAAM,CAAA;AAA9C,IAAA,WAAA,GAAA;;QACE,IAAK,CAAA,KAAA,GAAgC,EAAE,CAAA;QACvC,IAAc,CAAA,cAAA,GAAG,EAAE,CAAA;QACnB,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;QAC7B,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;AACjB,QAAA,IAAA,CAAA,WAAW,GAAG,WAAW,CAAC,MAAM,CAAA;KACjC;AAAA;;;;"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { select } from 'd3-selection';
|
|
2
|
-
import { color } from 'd3-color';
|
|
3
|
-
import { getColor } from '../../utils/color.js';
|
|
4
2
|
import { BulletLegendConfig } from './config.js';
|
|
3
|
+
import { createBullets, updateBullets } from './modules/shape.js';
|
|
5
4
|
import * as style from './style.js';
|
|
6
5
|
import { root, item, bullet, label, clickable } from './style.js';
|
|
7
6
|
|
|
@@ -32,8 +31,7 @@ class BulletLegend {
|
|
|
32
31
|
.on('click', this._onItemClick.bind(this));
|
|
33
32
|
legendItemsEnter.append('span')
|
|
34
33
|
.attr('class', bullet)
|
|
35
|
-
.
|
|
36
|
-
.style('height', config.bulletSize);
|
|
34
|
+
.call(createBullets, config);
|
|
37
35
|
legendItemsEnter.append('span')
|
|
38
36
|
.attr('class', label)
|
|
39
37
|
.classed(config.labelClassName, true)
|
|
@@ -43,18 +41,10 @@ class BulletLegend {
|
|
|
43
41
|
legendItemsMerged
|
|
44
42
|
.classed(clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))
|
|
45
43
|
.style('display', (d) => d.hidden ? 'none' : null);
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
.style('
|
|
49
|
-
|
|
50
|
-
if (d.inactive) {
|
|
51
|
-
const bulletColor = window.getComputedStyle(elements[i]).getPropertyValue('background-color');
|
|
52
|
-
const transparentColor = color(bulletColor);
|
|
53
|
-
transparentColor.opacity = 0.4;
|
|
54
|
-
select(elements[i])
|
|
55
|
-
.style('background-color', transparentColor.toString());
|
|
56
|
-
}
|
|
57
|
-
});
|
|
44
|
+
legendItemsMerged.select(`.${bullet}`)
|
|
45
|
+
.style('min-width', config.bulletSize)
|
|
46
|
+
.style('height', config.bulletSize)
|
|
47
|
+
.call(updateBullets, this.config, this._colorAccessor);
|
|
58
48
|
legendItemsMerged.select(`.${label}`)
|
|
59
49
|
.text((d) => d.name);
|
|
60
50
|
legendItems.exit().remove();
|
|
@@ -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// Config\nimport { BulletLegendConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface } 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 div: Selection<HTMLDivElement, unknown, null, undefined>\n element: HTMLElement\n prevConfig: BulletLegendConfig\n config: BulletLegendConfig\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 // Create SVG element for visualizations\n this.div = select(this._container)\n .append('div')\n .attr('class', s.root)\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 = new BulletLegendConfig().init(config)\n this.render()\n }\n\n render (): void {\n const { config } = this\n const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`)\n .data(config.items)\n\n const legendItemsEnter = legendItems.enter()\n .append('div')\n .attr('class', s.item)\n .on('click', this._onItemClick.bind(this))\n\n legendItemsEnter.append('span')\n .attr('class', s.bullet)\n .call(createBullets, config)\n\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 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 legendItemsMerged.select<HTMLSpanElement>(`.${s.bullet}`)\n .style('min-width', config.bulletSize)\n .style('height', config.bulletSize)\n .call(updateBullets, this.config, this._colorAccessor)\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 this.div.remove()\n }\n}\n"],"names":["s.root","s.item","s.bullet","s.label","s.clickable","s"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Selection } from 'd3-selection';
|
|
2
|
+
import { ColorAccessor } from "../../../types/accessor";
|
|
3
|
+
import { BulletLegendConfigInterface } from '../config';
|
|
4
|
+
import { BulletLegendItemInterface } from '../types';
|
|
5
|
+
export declare function createBullets(container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLDivElement, unknown>, config: BulletLegendConfigInterface): void;
|
|
6
|
+
export declare function updateBullets(container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLDivElement, unknown>, config: BulletLegendConfigInterface, colorAccessor: ColorAccessor<BulletLegendItemInterface>): void;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { getColor } from '../../../utils/color.js';
|
|
2
|
+
import { circlePath } from '../../../utils/path.js';
|
|
3
|
+
import { BulletShape } from '../types.js';
|
|
4
|
+
|
|
5
|
+
// Utils
|
|
6
|
+
// Size with respect to the viewBox. We use this to compute path data which is independent of the
|
|
7
|
+
// the configured size.
|
|
8
|
+
const BULLET_SIZE = 20;
|
|
9
|
+
function getWidth(shape) {
|
|
10
|
+
switch (shape) {
|
|
11
|
+
case BulletShape.Line:
|
|
12
|
+
return BULLET_SIZE * 2.5;
|
|
13
|
+
default:
|
|
14
|
+
return BULLET_SIZE;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
function getPath(shape, width, height) {
|
|
18
|
+
switch (shape) {
|
|
19
|
+
case BulletShape.Line:
|
|
20
|
+
return `M0,${height / 2} L${width / 2},${height / 2} L${width},${height / 2}`;
|
|
21
|
+
case BulletShape.Square:
|
|
22
|
+
return `M0,0 L${width},0 L${width},${height} L0,${height}Z`;
|
|
23
|
+
case BulletShape.Circle:
|
|
24
|
+
return circlePath(height / 2, height / 2, height / 2 - 1);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function createBullets(container, config) {
|
|
28
|
+
container.append('svg')
|
|
29
|
+
.attr('width', '100%')
|
|
30
|
+
.attr('height', '100%')
|
|
31
|
+
.append('path')
|
|
32
|
+
.attr('d', getPath(config.bulletShape, getWidth(config.bulletShape), BULLET_SIZE));
|
|
33
|
+
}
|
|
34
|
+
function updateBullets(container, config, colorAccessor) {
|
|
35
|
+
const height = BULLET_SIZE;
|
|
36
|
+
const width = getWidth(config.bulletShape);
|
|
37
|
+
const getOpacity = (d) => d.inactive ? 0.4 : 1;
|
|
38
|
+
const selection = container.select('svg')
|
|
39
|
+
.attr('viewBox', `0 0 ${width} ${height}`)
|
|
40
|
+
.select('path')
|
|
41
|
+
.attr('d', getPath(config.bulletShape, width, height))
|
|
42
|
+
.attr('stroke', (d, i) => getColor(d, colorAccessor, i))
|
|
43
|
+
.style('stroke-width', '1px')
|
|
44
|
+
.style('fill', (d, i) => getColor(d, colorAccessor, i))
|
|
45
|
+
.style('fill-opacity', getOpacity);
|
|
46
|
+
if (config.bulletShape === BulletShape.Line) {
|
|
47
|
+
selection
|
|
48
|
+
.style('stroke-width', `${height / 5}px`)
|
|
49
|
+
.style('opacity', getOpacity)
|
|
50
|
+
.style('fill', null)
|
|
51
|
+
.style('fill-opacity', null)
|
|
52
|
+
.style('marker-start', 'none')
|
|
53
|
+
.style('marker-end', 'none');
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export { createBullets, updateBullets };
|
|
58
|
+
//# sourceMappingURL=shape.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shape.js","sources":["../../../../src/components/bullet-legend/modules/shape.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Types\nimport { ColorAccessor } from 'types/accessor'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { circlePath } from 'utils/path'\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 = 20\n\nfunction getWidth (shape: BulletShape): number {\n switch (shape) {\n case BulletShape.Line:\n return BULLET_SIZE * 2.5\n default:\n return BULLET_SIZE\n }\n}\n\nfunction getPath (shape: BulletShape, width: number, height: number): string {\n switch (shape) {\n case BulletShape.Line:\n return `M0,${height / 2} L${width / 2},${height / 2} L${width},${height / 2}`\n case BulletShape.Square:\n return `M0,0 L${width},0 L${width},${height} L0,${height}Z`\n case BulletShape.Circle:\n return circlePath(height / 2, height / 2, height / 2 - 1)\n }\n}\n\nexport function createBullets (\n container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLDivElement, unknown>,\n config: BulletLegendConfigInterface\n): void {\n container.append('svg')\n .attr('width', '100%')\n .attr('height', '100%')\n .append('path')\n .attr('d', getPath(config.bulletShape, getWidth(config.bulletShape), BULLET_SIZE))\n}\n\nexport function updateBullets (\n container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLDivElement, unknown>,\n config: BulletLegendConfigInterface,\n colorAccessor: ColorAccessor<BulletLegendItemInterface>\n): void {\n const height = BULLET_SIZE\n const width = getWidth(config.bulletShape)\n\n const getOpacity = (d: BulletLegendItemInterface): number => d.inactive ? 0.4 : 1\n\n const selection = container.select('svg')\n .attr('viewBox', `0 0 ${width} ${height}`)\n .select('path')\n .attr('d', getPath(config.bulletShape, width, height))\n .attr('stroke', (d, i) => getColor(d, colorAccessor, i))\n .style('stroke-width', '1px')\n .style('fill', (d, i) => getColor(d, colorAccessor, i))\n .style('fill-opacity', getOpacity)\n\n if (config.bulletShape === BulletShape.Line) {\n selection\n .style('stroke-width', `${height / 5}px`)\n .style('opacity', getOpacity)\n .style('fill', null)\n .style('fill-opacity', null)\n .style('marker-start', 'none')\n .style('marker-end', 'none')\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -27,7 +27,8 @@ const variables = injectGlobal `
|
|
|
27
27
|
`;
|
|
28
28
|
const item = css `
|
|
29
29
|
label: legendItem;
|
|
30
|
-
display: inline;
|
|
30
|
+
display: inline-flex;
|
|
31
|
+
align-items: center;
|
|
31
32
|
font-family: var(--vis-legend-font-family, var(--vis-font-family));
|
|
32
33
|
margin-right: var(--vis-legend-item-spacing);
|
|
33
34
|
white-space: nowrap;
|
|
@@ -50,18 +51,14 @@ const label = css `
|
|
|
50
51
|
`;
|
|
51
52
|
const bullet = css `
|
|
52
53
|
label: legendItemBullet;
|
|
53
|
-
border-radius: 100%;
|
|
54
|
-
background-color: var(--vis-legend-bullet-inactive-color);
|
|
55
|
-
border: 1px solid;
|
|
56
|
-
display: inline-block;
|
|
57
54
|
margin-right: var(--vis-legend-bullet-label-spacing);
|
|
58
|
-
width: var(--vis-legend-bullet-size);
|
|
55
|
+
min-width: var(--vis-legend-bullet-size);
|
|
59
56
|
height: var(--vis-legend-bullet-size);
|
|
60
|
-
vertical-align: middle;
|
|
61
|
-
|
|
62
|
-
.inactive {
|
|
63
57
|
|
|
58
|
+
> svg {
|
|
59
|
+
display: block;
|
|
64
60
|
}
|
|
61
|
+
}
|
|
65
62
|
`;
|
|
66
63
|
|
|
67
64
|
export { bullet, clickable, item, 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-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\nexport const item = css`\n label: legendItem;\n display: inline;\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`\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 label: legendItemBullet;\n
|
|
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\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`\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 label: legendItemBullet;\n margin-right: var(--vis-legend-bullet-label-spacing);\n min-width: var(--vis-legend-bullet-size);\n height: 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;;;;;;;;;;;;;;;;;AAiBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAStB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/bullet-legend/types.ts"],"sourcesContent":["export interface BulletLegendItemInterface {\n name: string | number;\n color?: string;\n inactive?: boolean;\n hidden?: boolean;\n pointer?: boolean;\n}\n\nexport enum BulletShape {\n Circle = 'circle',\n Line = 'line',\n Square = 'square',\n}\n"],"names":[],"mappings":"IAQY,YAIX;AAJD,CAAA,UAAY,WAAW,EAAA;AACrB,IAAA,WAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,WAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,WAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAJW,WAAW,KAAX,WAAW,GAItB,EAAA,CAAA,CAAA;;;;"}
|
package/index.js
CHANGED
|
@@ -50,6 +50,7 @@ export { GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeShape }
|
|
|
50
50
|
export { SankeyEnterTransitionType, SankeyExitTransitionType, SankeyLayout, SankeyNodeAlign, SankeySubLabelPlacement } from './components/sankey/types.js';
|
|
51
51
|
export { VisControlsOrientation } from './components/vis-controls/types.js';
|
|
52
52
|
export { FreeBrushMode } from './components/free-brush/types.js';
|
|
53
|
+
export { BulletShape } from './components/bullet-legend/types.js';
|
|
53
54
|
export { XYLabelPositioning } from './components/xy-labels/types.js';
|
|
54
55
|
export { NestedDonutDirection, NestedDonutSegmentLabelAlignment } from './components/nested-donut/types.js';
|
|
55
56
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
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.3.0-alpha.
|
|
4
|
+
"version": "1.3.0-alpha.4",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|
package/types.js
CHANGED
|
@@ -22,7 +22,7 @@ export { GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeShape }
|
|
|
22
22
|
export { SankeyEnterTransitionType, SankeyExitTransitionType, SankeyLayout, SankeyNodeAlign, SankeySubLabelPlacement } from './components/sankey/types.js';
|
|
23
23
|
export { VisControlsOrientation } from './components/vis-controls/types.js';
|
|
24
24
|
export { FreeBrushMode } from './components/free-brush/types.js';
|
|
25
|
-
|
|
25
|
+
export { BulletShape } from './components/bullet-legend/types.js';
|
|
26
26
|
export { XYLabelPositioning } from './components/xy-labels/types.js';
|
|
27
27
|
export { NestedDonutDirection, NestedDonutSegmentLabelAlignment } from './components/nested-donut/types.js';
|
|
28
28
|
|