svelte-plots-basic 1.1.2 → 1.1.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.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/dist/index.js +27 -12
  3. package/dist/index.mjs +27 -12
  4. package/package.json +1 -1
  5. package/src/Axes.svelte +19 -9
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ## Description
4
4
 
5
- `svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for creating very simple 2D plots/charts. It is currently under active development and breaking changes may occur. In its current state (v. 1.1.2) it allows to create bar, scatter, area and line charts as well as any combination of the four. The charts are created using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and are re-scalable.
5
+ `svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for creating very simple 2D plots/charts. It is currently under active development and breaking changes may occur. In its current state (v. 1.1.3) it allows to create bar, scatter, area and line charts as well as any combination of the four. The charts are created using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and are re-scalable.
6
6
 
7
7
  The description is not complete yet and will be updated during February-March of 2022.
8
8
 
package/dist/index.js CHANGED
@@ -184,6 +184,9 @@
184
184
  function onMount(fn) {
185
185
  get_current_component().$$.on_mount.push(fn);
186
186
  }
187
+ function onDestroy(fn) {
188
+ get_current_component().$$.on_destroy.push(fn);
189
+ }
187
190
  function createEventDispatcher() {
188
191
  const component = get_current_component();
189
192
  return (type, detail, { cancelable = false } = {}) => {
@@ -509,7 +512,7 @@
509
512
  /* src/Axes.svelte generated by Svelte v3.50.1 */
510
513
 
511
514
  function add_css$3(target) {
512
- append_styles(target, "svelte-11hqgob", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n \"ylab axes\"\n \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-11hqgob{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes-content{padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
515
+ append_styles(target, "svelte-jxlrcp", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content auto;grid-template-rows:min-content auto min-content;grid-template-areas:\". title\"\n \"ylab axes\"\n \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-jxlrcp{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes-content{padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
513
516
  }
514
517
 
515
518
  const get_box_slot_changes = dirty => ({});
@@ -519,7 +522,7 @@
519
522
  const get_xaxis_slot_changes = dirty => ({});
520
523
  const get_xaxis_slot_context = ctx => ({});
521
524
 
522
- // (342:3) {#if title !== ""}
525
+ // (352:3) {#if title !== ""}
523
526
  function create_if_block_3(ctx) {
524
527
  let div;
525
528
 
@@ -540,7 +543,7 @@
540
543
  };
541
544
  }
542
545
 
543
- // (343:3) {#if yLabel !== ""}
546
+ // (353:3) {#if yLabel !== ""}
544
547
  function create_if_block_2(ctx) {
545
548
  let div;
546
549
  let span;
@@ -564,7 +567,7 @@
564
567
  };
565
568
  }
566
569
 
567
- // (344:3) {#if xLabel !== ""}
570
+ // (354:3) {#if xLabel !== ""}
568
571
  function create_if_block_1(ctx) {
569
572
  let div;
570
573
  let span;
@@ -588,7 +591,7 @@
588
591
  };
589
592
  }
590
593
 
591
- // (372:3) {#if !$isOk}
594
+ // (382:3) {#if !$isOk}
592
595
  function create_if_block$9(ctx) {
593
596
  let p;
594
597
 
@@ -674,8 +677,8 @@
674
677
  attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
675
678
  attr(svg, "preserveAspectRatio", "none");
676
679
  attr(svg, "class", "axes");
677
- attr(div0, "class", "axes-wrapper svelte-11hqgob");
678
- attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-11hqgob");
680
+ attr(div0, "class", "axes-wrapper svelte-jxlrcp");
681
+ attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-jxlrcp");
679
682
  toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
680
683
  },
681
684
  m(target, anchor) {
@@ -848,7 +851,7 @@
848
851
  if_block3 = null;
849
852
  }
850
853
 
851
- if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-11hqgob")) {
854
+ if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-jxlrcp")) {
852
855
  attr(div1, "class", div1_class_value);
853
856
  }
854
857
 
@@ -1162,19 +1165,31 @@
1162
1165
  dispatch("axesclick");
1163
1166
  }
1164
1167
 
1165
- /* observer for the plotting area size */
1166
- var ro = new ResizeObserver(entries => {
1168
+ /* observer for the axes area size - to update size of axes */
1169
+ const ro2 = new ResizeObserver(entries => {
1167
1170
  for (let entry of entries) {
1168
- const pcr = plotElement.getBoundingClientRect();
1169
1171
  const acr = axesElement.getBoundingClientRect();
1170
1172
  width.update(x => acr.width);
1171
1173
  height.update(x => acr.height);
1174
+ }
1175
+ });
1176
+
1177
+ /* observer for the plot area size — to update scale */
1178
+ const ro1 = new ResizeObserver(entries => {
1179
+ for (let entry of entries) {
1180
+ const pcr = plotElement.getBoundingClientRect();
1172
1181
  scale.update(x => getScale(pcr.width, pcr.height));
1173
1182
  }
1174
1183
  });
1175
1184
 
1176
1185
  onMount(() => {
1177
- ro.observe(plotElement);
1186
+ ro1.observe(plotElement);
1187
+ ro2.observe(axesElement);
1188
+ });
1189
+
1190
+ onDestroy(() => {
1191
+ ro1.unobserve(plotElement);
1192
+ ro2.unobserve(axesElement);
1178
1193
  });
1179
1194
 
1180
1195
  function div0_binding($$value) {
package/dist/index.mjs CHANGED
@@ -178,6 +178,9 @@ function get_current_component() {
178
178
  function onMount(fn) {
179
179
  get_current_component().$$.on_mount.push(fn);
180
180
  }
181
+ function onDestroy(fn) {
182
+ get_current_component().$$.on_destroy.push(fn);
183
+ }
181
184
  function createEventDispatcher() {
182
185
  const component = get_current_component();
183
186
  return (type, detail, { cancelable = false } = {}) => {
@@ -503,7 +506,7 @@ function writable(value, start = noop) {
503
506
  /* src/Axes.svelte generated by Svelte v3.50.1 */
504
507
 
505
508
  function add_css$3(target) {
506
- append_styles(target, "svelte-11hqgob", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n \"ylab axes\"\n \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-11hqgob{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes-content{padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
509
+ append_styles(target, "svelte-jxlrcp", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content auto;grid-template-rows:min-content auto min-content;grid-template-areas:\". title\"\n \"ylab axes\"\n \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-jxlrcp{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes-content{padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
507
510
  }
508
511
 
509
512
  const get_box_slot_changes = dirty => ({});
@@ -513,7 +516,7 @@ const get_yaxis_slot_context = ctx => ({});
513
516
  const get_xaxis_slot_changes = dirty => ({});
514
517
  const get_xaxis_slot_context = ctx => ({});
515
518
 
516
- // (342:3) {#if title !== ""}
519
+ // (352:3) {#if title !== ""}
517
520
  function create_if_block_3(ctx) {
518
521
  let div;
519
522
 
@@ -534,7 +537,7 @@ function create_if_block_3(ctx) {
534
537
  };
535
538
  }
536
539
 
537
- // (343:3) {#if yLabel !== ""}
540
+ // (353:3) {#if yLabel !== ""}
538
541
  function create_if_block_2(ctx) {
539
542
  let div;
540
543
  let span;
@@ -558,7 +561,7 @@ function create_if_block_2(ctx) {
558
561
  };
559
562
  }
560
563
 
561
- // (344:3) {#if xLabel !== ""}
564
+ // (354:3) {#if xLabel !== ""}
562
565
  function create_if_block_1(ctx) {
563
566
  let div;
564
567
  let span;
@@ -582,7 +585,7 @@ function create_if_block_1(ctx) {
582
585
  };
583
586
  }
584
587
 
585
- // (372:3) {#if !$isOk}
588
+ // (382:3) {#if !$isOk}
586
589
  function create_if_block$9(ctx) {
587
590
  let p;
588
591
 
@@ -668,8 +671,8 @@ function create_fragment$b(ctx) {
668
671
  attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
669
672
  attr(svg, "preserveAspectRatio", "none");
670
673
  attr(svg, "class", "axes");
671
- attr(div0, "class", "axes-wrapper svelte-11hqgob");
672
- attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-11hqgob");
674
+ attr(div0, "class", "axes-wrapper svelte-jxlrcp");
675
+ attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-jxlrcp");
673
676
  toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
674
677
  },
675
678
  m(target, anchor) {
@@ -842,7 +845,7 @@ function create_fragment$b(ctx) {
842
845
  if_block3 = null;
843
846
  }
844
847
 
845
- if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-11hqgob")) {
848
+ if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-jxlrcp")) {
846
849
  attr(div1, "class", div1_class_value);
847
850
  }
848
851
 
@@ -1156,19 +1159,31 @@ function instance$b($$self, $$props, $$invalidate) {
1156
1159
  dispatch("axesclick");
1157
1160
  }
1158
1161
 
1159
- /* observer for the plotting area size */
1160
- var ro = new ResizeObserver(entries => {
1162
+ /* observer for the axes area size - to update size of axes */
1163
+ const ro2 = new ResizeObserver(entries => {
1161
1164
  for (let entry of entries) {
1162
- const pcr = plotElement.getBoundingClientRect();
1163
1165
  const acr = axesElement.getBoundingClientRect();
1164
1166
  width.update(x => acr.width);
1165
1167
  height.update(x => acr.height);
1168
+ }
1169
+ });
1170
+
1171
+ /* observer for the plot area size — to update scale */
1172
+ const ro1 = new ResizeObserver(entries => {
1173
+ for (let entry of entries) {
1174
+ const pcr = plotElement.getBoundingClientRect();
1166
1175
  scale.update(x => getScale(pcr.width, pcr.height));
1167
1176
  }
1168
1177
  });
1169
1178
 
1170
1179
  onMount(() => {
1171
- ro.observe(plotElement);
1180
+ ro1.observe(plotElement);
1181
+ ro2.observe(axesElement);
1182
+ });
1183
+
1184
+ onDestroy(() => {
1185
+ ro1.unobserve(plotElement);
1186
+ ro2.unobserve(axesElement);
1172
1187
  });
1173
1188
 
1174
1189
  function div0_binding($$value) {
package/package.json CHANGED
@@ -25,7 +25,7 @@
25
25
  "dist"
26
26
  ],
27
27
  "description": "Svelte components for creating simple plots",
28
- "version": "1.1.2",
28
+ "version": "1.1.3",
29
29
  "repository": {
30
30
  "type": "git",
31
31
  "url": "svkucheryavski/svelte-plots-basic"
package/src/Axes.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import { setContext, createEventDispatcher, onMount } from 'svelte';
2
+ import { setContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
3
3
  import { writable } from 'svelte/store';
4
4
 
5
5
  /* input parameters */
@@ -317,22 +317,32 @@
317
317
  $: cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1];
318
318
  $: cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0];
319
319
 
320
- /* observer for the plotting area size */
321
- var ro = new ResizeObserver(entries => {
320
+ /* observer for the axes area size - to update size of axes */
321
+ const ro2 = new ResizeObserver(entries => {
322
322
  for (let entry of entries) {
323
-
324
- const pcr = plotElement.getBoundingClientRect();
325
323
  const acr = axesElement.getBoundingClientRect();
326
-
327
324
  width.update(x => acr.width);
328
325
  height.update(x => acr.height);
326
+ }
327
+ });
328
+
329
+ /* observer for the plot area size — to update scale */
330
+ const ro1 = new ResizeObserver(entries => {
331
+ for (let entry of entries) {
332
+ const pcr = plotElement.getBoundingClientRect();
329
333
  scale.update(x => getScale(pcr.width, pcr.height));
330
334
  }
331
335
  });
332
336
 
333
337
  onMount(() => {
334
- ro.observe(plotElement);
338
+ ro1.observe(plotElement);
339
+ ro2.observe(axesElement);
335
340
  });
341
+
342
+ onDestroy(() => {
343
+ ro1.unobserve(plotElement);
344
+ ro2.unobserve(axesElement);
345
+ })
336
346
  </script>
337
347
 
338
348
 
@@ -385,8 +395,8 @@
385
395
  font-family: Arial, Helvetica, sans-serif;
386
396
 
387
397
  display: grid;
388
- grid-template-columns: min-content 1fr;
389
- grid-template-rows: auto 1fr auto;
398
+ grid-template-columns: min-content auto;
399
+ grid-template-rows: min-content auto min-content;
390
400
  grid-template-areas:
391
401
  ". title"
392
402
  "ylab axes"