svelte-tiny-linked-charts 1.3.0 → 1.4.1

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 +4 -3
  2. package/{src → dist}/LinkedChart.svelte +8 -6
  3. package/dist/LinkedChart.svelte.d.ts +91 -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,7 +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-confetti)](https://bundlephobia.com/package/svelte-tiny-linked-charts)
7
+ [![bundle size](https://badgen.net/bundlephobia/minzip/svelte-tiny-linked-charts)](https://bundlephobia.com/package/svelte-tiny-linked-charts)
8
8
 
9
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.
10
10
 
@@ -14,10 +14,10 @@ This is a library to display tiny bar charts. These charts are more so meant for
14
14
 
15
15
  Install using Yarn or NPM.
16
16
  ```js
17
- yarn add svelte-tiny-linked-charts
17
+ yarn add svelte-tiny-linked-charts --dev
18
18
  ```
19
19
  ```js
20
- npm install --save svelte-tiny-linked-charts
20
+ npm install svelte-tiny-linked-charts --save-dev
21
21
  ```
22
22
 
23
23
  Include the chart in your app.
@@ -101,6 +101,7 @@ scaleMax | 0 | Use this to overwrite the automatic scale set to the highest valu
101
101
  type | bar | Can be set to "line" to display a line chart instead.
102
102
  lineColor | fill | Color of the line if used with type="line".
103
103
  tabindex | -1 | Sets the tabindex of each bar.
104
+ preserveAspectRatio | false | Sets whether or not the SVG will preserve it's aspect ratio
104
105
  dispatchEvents | false | Boolean whether or not to dispatch events on certain actions.
105
106
  clickHandler | null | Function that executes on click and returns the key and index for the clicked data.
106
107
 
package/{src → dist}/LinkedChart.svelte RENAMED
@@ -30,6 +30,7 @@
30
30
  export let lineColor = fill
31
31
  export let tabindex = -1
32
32
  export let dispatchEvents = false
33
+ export let preserveAspectRatio = false
33
34
  export let clickHandler = (key, i) => null
34
35
 
35
36
  const dispatch = createEventDispatcher()
@@ -80,7 +81,7 @@
80
81
  let points = []
81
82
 
82
83
  for (let i = 0; i < Object.keys(data).length; i++) {
83
- points.push([i * (barWidth + gap), height - getHeight(Object.values(data)[i])])
84
+ points.push([i * ((barWidth + parseInt(gap)) + (barWidth / (Object.keys(data).length))), height - getHeight(Object.values(data)[i])])
84
85
  }
85
86
 
86
87
  return points
@@ -105,13 +106,13 @@
105
106
  }
106
107
  </script>
107
108
 
108
-
109
-
109
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
110
110
  <svg
111
111
  { width }
112
112
  height={ type == "line" ? height + barWidth / 2 : height }
113
113
  viewBox="0 0 { width } { height }"
114
- preserveAspectRatio="none"
114
+ preserveAspectRatio={ preserveAspectRatio ? "true" : "none" }
115
+ {...$$restProps}
115
116
  on:mouseleave={ endHover }
116
117
  on:blur={ endHover }>
117
118
 
@@ -133,12 +134,13 @@
133
134
  { :else if type == "line" }
134
135
  <circle
135
136
  fill={ hover && $hoveringKey[linkedKey] !== null && $hoveringKey[linkedKey] == key ? fill : "transparent" }
136
- r={ barWidth / 2 }
137
+ r={ grow ? parseInt(barMinWidth) : barWidth / 2 }
137
138
  cy={ height - getHeight(value) }
138
- cx={ ((parseInt(gap) + barWidth) * i) } />
139
+ cx={ ((parseInt(gap) + barWidth) + (barWidth / (Object.keys(data).length))) * i } />
139
140
  { /if }
140
141
 
141
142
  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
143
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
142
144
  <rect
143
145
  on:mouseover={ () => startHover(key, i) }
144
146
  on:focus={ () => startHover(key, i) }
package/dist/LinkedChart.svelte.d.ts ADDED
@@ -0,0 +1,91 @@
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
+ [x: string]: any;
6
+ hover?: boolean;
7
+ uid?: string;
8
+ data?: {};
9
+ labels?: any[];
10
+ values?: any[];
11
+ linked?: string;
12
+ height?: number;
13
+ width?: number;
14
+ barMinWidth?: number;
15
+ barMinHeight?: number;
16
+ hideBarBelow?: number;
17
+ grow?: boolean;
18
+ align?: string;
19
+ gap?: number;
20
+ fill?: string;
21
+ fadeOpacity?: number;
22
+ transition?: number;
23
+ showValue?: boolean;
24
+ valueDefault?: string;
25
+ valuePrepend?: string;
26
+ valueAppend?: string;
27
+ valuePosition?: string;
28
+ valueUndefined?: number;
29
+ scaleMax?: number;
30
+ type?: string;
31
+ lineColor?: string;
32
+ tabindex?: number;
33
+ dispatchEvents?: boolean;
34
+ preserveAspectRatio?: boolean;
35
+ clickHandler?: (key: any, i: any) => any;
36
+ }, {
37
+ 'value-update': CustomEvent<any>;
38
+ hover: CustomEvent<any>;
39
+ blur: CustomEvent<any>;
40
+ } & {
41
+ [evt: string]: CustomEvent<any>;
42
+ }, {}> {
43
+ }
44
+ export type LinkedChartProps = typeof __propDef.props;
45
+ export type LinkedChartEvents = typeof __propDef.events;
46
+ export type LinkedChartSlots = typeof __propDef.slots;
47
+ import { SvelteComponent } from "svelte";
48
+ declare const __propDef: {
49
+ props: {
50
+ [x: string]: any;
51
+ hover?: boolean;
52
+ uid?: string;
53
+ data?: {};
54
+ labels?: any[];
55
+ values?: any[];
56
+ linked?: string;
57
+ height?: number;
58
+ width?: number;
59
+ barMinWidth?: number;
60
+ barMinHeight?: number;
61
+ hideBarBelow?: number;
62
+ grow?: boolean;
63
+ align?: string;
64
+ gap?: number;
65
+ fill?: string;
66
+ fadeOpacity?: number;
67
+ transition?: number;
68
+ showValue?: boolean;
69
+ valueDefault?: string;
70
+ valuePrepend?: string;
71
+ valueAppend?: string;
72
+ valuePosition?: string;
73
+ valueUndefined?: number;
74
+ scaleMax?: number;
75
+ type?: string;
76
+ lineColor?: string;
77
+ tabindex?: number;
78
+ dispatchEvents?: boolean;
79
+ preserveAspectRatio?: boolean;
80
+ clickHandler?: (key: any, i: any) => any;
81
+ };
82
+ events: {
83
+ 'value-update': CustomEvent<any>;
84
+ hover: CustomEvent<any>;
85
+ blur: CustomEvent<any>;
86
+ } & {
87
+ [evt: string]: CustomEvent<any>;
88
+ };
89
+ slots: {};
90
+ };
91
+ 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.3.0",
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.1",
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": "npm run build && 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