svelte-tiny-linked-charts 1.2.3 → 1.4.0

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.
Files changed (12) hide show
  1. package/README.md +3 -2
  2. package/{src → dist}/LinkedChart.svelte +21 -15
  3. package/dist/LinkedChart.svelte.d.ts +87 -0
  4. package/{src → dist}/LinkedLabel.svelte +5 -7
  5. package/dist/LinkedLabel.svelte.d.ts +25 -0
  6. package/{src → dist}/LinkedValue.svelte +5 -7
  7. package/dist/LinkedValue.svelte.d.ts +27 -0
  8. package/dist/index.d.ts +4 -0
  9. package/{src → dist}/index.js +5 -5
  10. package/dist/stores/tinyLinkedCharts.d.ts +3 -0
  11. package/package.json +69 -56
  12. /package/{src → dist}/stores/tinyLinkedCharts.js +0 -0
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
  [![npm version](https://badgen.net/npm/v/svelte-tiny-linked-charts)](https://www.npmjs.com/package/svelte-tiny-linked-charts)
5
5
  [![npm downloads](https://badgen.net/npm/dt/svelte-tiny-linked-charts)](https://www.npmjs.com/package/svelte-tiny-linked-charts)
6
6
  [![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/3278-shield.svg)](https://madewithsvelte.com/p/tiny-linked-charts/shield-link)
7
+ [![bundle size](https://badgen.net/bundlephobia/minzip/svelte-tiny-linked-charts)](https://bundlephobia.com/package/svelte-tiny-linked-charts)
7
8
 
8
9
  This is a library to display tiny bar charts. These charts are more so meant for graphic aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.
9
10
 
@@ -13,10 +14,10 @@ This is a library to display tiny bar charts. These charts are more so meant for
13
14
 
14
15
  Install using Yarn or NPM.
15
16
  ```js
16
- yarn add svelte-tiny-linked-charts
17
+ yarn add svelte-tiny-linked-charts --dev
17
18
  ```
18
19
  ```js
19
- npm install --save svelte-tiny-linked-charts
20
+ npm install svelte-tiny-linked-charts --save-dev
20
21
  ```
21
22
 
22
23
  Include the chart in your app.
package/{src → dist}/LinkedChart.svelte RENAMED
@@ -105,8 +105,7 @@
105
105
  }
106
106
  </script>
107
107
 
108
-
109
-
108
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
110
109
  <svg
111
110
  { width }
112
111
  height={ type == "line" ? height + barWidth / 2 : height }
@@ -121,29 +120,36 @@
121
120
  { /if }
122
121
 
123
122
  { #each Object.entries(data) as [key, value], i }
123
+ { #if type == "bar" }
124
+ <rect
125
+ style={ transition ? `transition: all ${ transition }ms` : null }
126
+ opacity={ hover && $hoveringKey[linkedKey] && $hoveringKey[linkedKey] != key ? fadeOpacity : 1 }
127
+ fill={ fill }
128
+ width={ barWidth }
129
+ height={ type == "line" ? height : getHeight(value) }
130
+ x={ (parseInt(gap) + barWidth) * i }
131
+ y={ (height - getHeight(value)) } />
132
+ { :else if type == "line" }
133
+ <circle
134
+ fill={ hover && $hoveringKey[linkedKey] !== null && $hoveringKey[linkedKey] == key ? fill : "transparent" }
135
+ r={ barWidth / 2 }
136
+ cy={ height - getHeight(value) }
137
+ cx={ ((parseInt(gap) + barWidth) * i) } />
138
+ { /if }
139
+
124
140
  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
141
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
125
142
  <rect
126
143
  on:mouseover={ () => startHover(key, i) }
127
144
  on:focus={ () => startHover(key, i) }
128
145
  on:touchstart={ () => startHover(key, i) }
129
146
  on:click={ () => clickHandler(key, i) }
130
147
  on:keypress={ () => clickHandler(key, i) }
131
- style={ transition ? `transition: all ${ transition }ms` : null }
132
- opacity={ hover && $hoveringKey[linkedKey] && $hoveringKey[linkedKey] != key ? fadeOpacity : 1 }
133
- fill={ type == "line" ? "transparent" : fill }
134
148
  width={ barWidth }
135
- height={ type == "line" ? height : getHeight(value) }
136
- y={ type == "line" ? 0 : (height - getHeight(value)) }
149
+ height={ height }
150
+ fill="transparent"
137
151
  x={ (parseInt(gap) + barWidth) * i }
138
152
  { tabindex } />
139
-
140
- { #if type == "line" }
141
- <circle
142
- fill={ hover && $hoveringKey[linkedKey] !== null && $hoveringKey[linkedKey] == key ? fill : "transparent" }
143
- r={ barWidth / 2 }
144
- cy={ height - getHeight(value) }
145
- cx={ ((parseInt(gap) + barWidth) * i) } />
146
- { /if }
147
153
  { /each }
148
154
  </g>
149
155
  </svg>
package/dist/LinkedChart.svelte.d.ts ADDED
@@ -0,0 +1,87 @@
1
+ /** @typedef {typeof __propDef.props} LinkedChartProps */
2
+ /** @typedef {typeof __propDef.events} LinkedChartEvents */
3
+ /** @typedef {typeof __propDef.slots} LinkedChartSlots */
4
+ export default class LinkedChart extends SvelteComponent<{
5
+ hover?: boolean;
6
+ uid?: string;
7
+ data?: {};
8
+ labels?: any[];
9
+ values?: any[];
10
+ linked?: string;
11
+ height?: number;
12
+ width?: number;
13
+ barMinWidth?: number;
14
+ barMinHeight?: number;
15
+ hideBarBelow?: number;
16
+ grow?: boolean;
17
+ align?: string;
18
+ gap?: number;
19
+ fill?: string;
20
+ fadeOpacity?: number;
21
+ transition?: number;
22
+ showValue?: boolean;
23
+ valueDefault?: string;
24
+ valuePrepend?: string;
25
+ valueAppend?: string;
26
+ valuePosition?: string;
27
+ valueUndefined?: number;
28
+ scaleMax?: number;
29
+ type?: string;
30
+ lineColor?: string;
31
+ tabindex?: number;
32
+ dispatchEvents?: boolean;
33
+ clickHandler?: (key: any, i: any) => any;
34
+ }, {
35
+ 'value-update': CustomEvent<any>;
36
+ hover: CustomEvent<any>;
37
+ blur: CustomEvent<any>;
38
+ } & {
39
+ [evt: string]: CustomEvent<any>;
40
+ }, {}> {
41
+ }
42
+ export type LinkedChartProps = typeof __propDef.props;
43
+ export type LinkedChartEvents = typeof __propDef.events;
44
+ export type LinkedChartSlots = typeof __propDef.slots;
45
+ import { SvelteComponent } from "svelte";
46
+ declare const __propDef: {
47
+ props: {
48
+ hover?: boolean;
49
+ uid?: string;
50
+ data?: {};
51
+ labels?: any[];
52
+ values?: any[];
53
+ linked?: string;
54
+ height?: number;
55
+ width?: number;
56
+ barMinWidth?: number;
57
+ barMinHeight?: number;
58
+ hideBarBelow?: number;
59
+ grow?: boolean;
60
+ align?: string;
61
+ gap?: number;
62
+ fill?: string;
63
+ fadeOpacity?: number;
64
+ transition?: number;
65
+ showValue?: boolean;
66
+ valueDefault?: string;
67
+ valuePrepend?: string;
68
+ valueAppend?: string;
69
+ valuePosition?: string;
70
+ valueUndefined?: number;
71
+ scaleMax?: number;
72
+ type?: string;
73
+ lineColor?: string;
74
+ tabindex?: number;
75
+ dispatchEvents?: boolean;
76
+ clickHandler?: (key: any, i: any) => any;
77
+ };
78
+ events: {
79
+ 'value-update': CustomEvent<any>;
80
+ hover: CustomEvent<any>;
81
+ blur: CustomEvent<any>;
82
+ } & {
83
+ [evt: string]: CustomEvent<any>;
84
+ };
85
+ slots: {};
86
+ };
87
+ export {};
package/{src → dist}/LinkedLabel.svelte RENAMED
@@ -7,10 +7,8 @@
7
7
  $: label = $hoveringKey[linked]
8
8
  </script>
9
9
 
10
-
11
-
12
- { #if label }
13
- { label }
14
- { :else }
15
- { @html empty }
16
- { /if }
10
+ {#if label}
11
+ {label}
12
+ {:else}
13
+ {@html empty}
14
+ {/if}
package/dist/LinkedLabel.svelte.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ /** @typedef {typeof __propDef.props} LinkedLabelProps */
2
+ /** @typedef {typeof __propDef.events} LinkedLabelEvents */
3
+ /** @typedef {typeof __propDef.slots} LinkedLabelSlots */
4
+ export default class LinkedLabel extends SvelteComponent<{
5
+ linked: any;
6
+ empty?: string;
7
+ }, {
8
+ [evt: string]: CustomEvent<any>;
9
+ }, {}> {
10
+ }
11
+ export type LinkedLabelProps = typeof __propDef.props;
12
+ export type LinkedLabelEvents = typeof __propDef.events;
13
+ export type LinkedLabelSlots = typeof __propDef.slots;
14
+ import { SvelteComponent } from "svelte";
15
+ declare const __propDef: {
16
+ props: {
17
+ linked: any;
18
+ empty?: string;
19
+ };
20
+ events: {
21
+ [evt: string]: CustomEvent<any>;
22
+ };
23
+ slots: {};
24
+ };
25
+ export {};
package/{src → dist}/LinkedValue.svelte RENAMED
@@ -8,10 +8,8 @@
8
8
  $: value = $hoveringValue[uid]
9
9
  </script>
10
10
 
11
-
12
-
13
- { #if uid in $hoveringValue && value !== null }
14
- { value || valueUndefined }
15
- { :else }
16
- { @html empty }
17
- { /if }
11
+ {#if uid in $hoveringValue && value !== null}
12
+ {value || valueUndefined}
13
+ {:else}
14
+ {@html empty}
15
+ {/if}
package/dist/LinkedValue.svelte.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ /** @typedef {typeof __propDef.props} LinkedValueProps */
2
+ /** @typedef {typeof __propDef.events} LinkedValueEvents */
3
+ /** @typedef {typeof __propDef.slots} LinkedValueSlots */
4
+ export default class LinkedValue extends SvelteComponent<{
5
+ uid: any;
6
+ valueUndefined?: number;
7
+ empty?: string;
8
+ }, {
9
+ [evt: string]: CustomEvent<any>;
10
+ }, {}> {
11
+ }
12
+ export type LinkedValueProps = typeof __propDef.props;
13
+ export type LinkedValueEvents = typeof __propDef.events;
14
+ export type LinkedValueSlots = typeof __propDef.slots;
15
+ import { SvelteComponent } from "svelte";
16
+ declare const __propDef: {
17
+ props: {
18
+ uid: any;
19
+ valueUndefined?: number;
20
+ empty?: string;
21
+ };
22
+ events: {
23
+ [evt: string]: CustomEvent<any>;
24
+ };
25
+ slots: {};
26
+ };
27
+ export {};
package/dist/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import LinkedChart from "./LinkedChart.svelte";
2
+ import LinkedLabel from "./LinkedLabel.svelte";
3
+ import LinkedValue from "./LinkedValue.svelte";
4
+ export { LinkedChart, LinkedLabel, LinkedValue };
package/{src → dist}/index.js RENAMED
@@ -1,5 +1,5 @@
1
- import LinkedChart from "./LinkedChart.svelte"
2
- import LinkedLabel from "./LinkedLabel.svelte"
3
- import LinkedValue from "./LinkedValue.svelte"
4
-
5
- export { LinkedChart, LinkedLabel, LinkedValue }
1
+ import LinkedChart from "./LinkedChart.svelte"
2
+ import LinkedLabel from "./LinkedLabel.svelte"
3
+ import LinkedValue from "./LinkedValue.svelte"
4
+
5
+ export { LinkedChart, LinkedLabel, LinkedValue }
package/dist/stores/tinyLinkedCharts.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /// <reference types="svelte" />
2
+ export const hoveringKey: import("svelte/store").Writable<{}>;
3
+ export const hoveringValue: import("svelte/store").Writable<{}>;
package/package.json CHANGED
@@ -1,56 +1,69 @@
1
- {
2
- "name": "svelte-tiny-linked-charts",
3
- "version": "1.2.3",
4
- "private": false,
5
- "scripts": {
6
- "build": "rollup -c",
7
- "dev": "rollup -c -w",
8
- "start": "sirv public --no-clear",
9
- "test": "jest",
10
- "test:watch": "npm run test -- --watch"
11
- },
12
- "devDependencies": {
13
- "@babel/preset-env": "^7.15.0",
14
- "@rollup/plugin-commonjs": "^17.0.0",
15
- "@rollup/plugin-node-resolve": "^11.0.0",
16
- "@testing-library/jest-dom": "^5.14.1",
17
- "@testing-library/svelte": "^3.0.3",
18
- "babel-jest": "^27.0.6",
19
- "jest": "^27.0.6",
20
- "jsdom-global": "^3.0.2",
21
- "rollup": "^2.3.4",
22
- "rollup-plugin-css-only": "^3.1.0",
23
- "rollup-plugin-livereload": "^2.0.0",
24
- "rollup-plugin-svelte": "^7.0.0",
25
- "rollup-plugin-terser": "^7.0.0",
26
- "svelte": "^3.0.0",
27
- "svelte-jest": "^0.3.1",
28
- "svelte-jester": "^2.0.1"
29
- },
30
- "description": "A library to display tiny bar charts using Svelte. These charts are more so meant for graphic aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.",
31
- "keywords": [
32
- "svelte",
33
- "tiny",
34
- "charts",
35
- "linked",
36
- "linked-charts",
37
- "tiny-linked-charts"
38
- ],
39
- "files": [
40
- "src/"
41
- ],
42
- "license": "MIT",
43
- "type": "module",
44
- "main": "src/index.js",
45
- "module": "src/index.mjs",
46
- "svelte": "src/index.js",
47
- "author": {
48
- "email": "mitchel_jager@hotmail.com",
49
- "name": "mitcheljager"
50
- },
51
- "repository": {
52
- "type": "git",
53
- "url": "https://github.com/Mitcheljager/svelte-tiny-linked-charts"
54
- },
55
- "homepage": "https://mitcheljager.github.io/svelte-tiny-linked-charts/"
56
- }
1
+ {
2
+ "name": "svelte-tiny-linked-charts",
3
+ "version": "1.4.0",
4
+ "scripts": {
5
+ "dev": "vite dev",
6
+ "build": "vite build && npm run package",
7
+ "preview": "vite preview",
8
+ "package": "svelte-kit sync && svelte-package && publint",
9
+ "prepublishOnly": "npm run package",
10
+ "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
11
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
12
+ "test": "vitest",
13
+ "lint": "prettier --plugin-search-dir . --check . && eslint .",
14
+ "format": "prettier --plugin-search-dir . --write .",
15
+ "publish-pages": "git subtree push --prefix build origin gh-pages"
16
+ },
17
+ "exports": {
18
+ ".": {
19
+ "types": "./dist/index.d.ts",
20
+ "svelte": "./dist/index.js"
21
+ }
22
+ },
23
+ "files": [
24
+ "dist",
25
+ "!dist/**/*.test.*",
26
+ "!dist/**/*.spec.*"
27
+ ],
28
+ "peerDependencies": {
29
+ "svelte": "^4.0.0"
30
+ },
31
+ "devDependencies": {
32
+ "@sveltejs/adapter-auto": "^2.0.0",
33
+ "@sveltejs/adapter-static": "^2.0.3",
34
+ "@sveltejs/kit": "^1.20.4",
35
+ "@sveltejs/package": "^2.0.0",
36
+ "@testing-library/svelte": "^4.0.3",
37
+ "eslint": "^8.28.0",
38
+ "eslint-config-prettier": "^8.5.0",
39
+ "eslint-plugin-svelte": "^2.30.0",
40
+ "jsdom": "^22.1.0",
41
+ "prettier": "^2.8.0",
42
+ "prettier-plugin-svelte": "^2.10.1",
43
+ "publint": "^0.1.9",
44
+ "svelte": "^4.0.5",
45
+ "svelte-check": "^3.4.3",
46
+ "tslib": "^2.4.1",
47
+ "typescript": "^5.0.0",
48
+ "vite": "^4.4.2",
49
+ "vitest": "^0.34.0"
50
+ },
51
+ "svelte": "./dist/index.js",
52
+ "types": "./dist/index.d.ts",
53
+ "main": "./dist/index.js",
54
+ "type": "module",
55
+ "description": "A library to display tiny bar charts using Svelte. These charts are more so meant for graphic aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.",
56
+ "keywords": [
57
+ "svelte",
58
+ "tiny",
59
+ "charts",
60
+ "linked",
61
+ "linked-charts",
62
+ "tiny-linked-charts"
63
+ ],
64
+ "repository": {
65
+ "type": "git",
66
+ "url": "https://github.com/Mitcheljager/svelte-tiny-linked-charts"
67
+ },
68
+ "homepage": "https://mitcheljager.github.io/svelte-tiny-linked-charts/"
69
+ }
/package/{src → dist}/stores/tinyLinkedCharts.js RENAMED
File without changes