npm - tiny-spark - Versions diffs - 0.1.0-alpha.0 → 0.1.0-alpha.2 - Mend

tiny-spark 0.1.0-alpha.0 → 0.1.0-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.

Files changed (15) hide show

package/dist/README.md ADDED Viewed

@@ -0,0 +1,40 @@
+# tiny-spark
+[![npm](https://img.shields.io/npm/v/tiny-spark)](https://github.com/graphieros/tiny-spark)
+[![GitHub issues](https://img.shields.io/github/issues/graphieros/tiny-spark)](https://github.com/graphieros/tiny-spark/issues)
+[![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/graphieros/tiny-spark?tab=MIT-1-ov-file#readme)
+[![npm](https://img.shields.io/npm/dt/tiny-spark)](https://github.com/graphieros/tiny-spark)
+An elegant, reactive and responsive sparkline chart solution without dependency.
+## Installation
+```
+npm i tiny-spark
+```
+## Usage
+Just set up a div with a "tiny-spark" class, with a few data attributes to configure the chart.
+```html
+<div style="width: 100%">
+  <div
+    class="tiny-spark"
+    data-curve="true"
+    data-set="[1, 2, 3, 5, 8, 13]"
+    data-dates='["01-2026", "02-2026", "03-2026", "04-2026", "05-2026", "06-2026"]'
+    data-responsive
+    data-animation="true"
+    data-line-color="#4A4A4A"
+    data-area-color="#1A1A1A10"
+    data-line-thickness="4"
+    data-plot-color="#2A2A2A"
+    data-plot-radius="2"
+    data-number-locale="en-US"
+    data-number-rounding="2"
+    data-indicator-color="#1A1A1A"
+    data-indicator-width="1"
+  ></div>
+</div>
+```

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "tiny-spark",
   "private": false,
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "type": "module",
   "description": "An elegant, reactive and responsive sparkline chart solution without dependency.",
   "author": "Alec Lloyd Probert",
@@ -22,7 +22,11 @@
     "dev": "vite",
     "build": "tsc && vite build"
   },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
+    "@types/node": "^22.13.13",
     "typescript": "~5.7.2",
     "vite": "^6.2.3"
   }

package/dist/vite.svg DELETED Viewed

@@ -1 +0,0 @@

- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html DELETED Viewed

@@ -1,32 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- <div
-      data-line
-      data-curve="true"
-      data-animation="true"
-      data-line-color="#4A4A4A"
-      data-area-color="#1A1A1A10"
-      data-line-thickness="4"
-      data-responsive
-      data-plot-color="#2A2A2A"
-      data-plot-radius="3"
-      data-number-locale="en-US"
-      data-number-rounding="2"
-      data-indicator-color="#1A1A1A"
-      data-indicator-width="1"
-      data-set="[1, 2, 3]"
-    ></div> -->
-    <script type="module" src="/src/main.ts"></script>
-    <!-- <script type="module" src="dist/tiny-spark.umd.js"></script> -->
-  </body>
-</html>

package/public/vite.svg DELETED Viewed

@@ -1 +0,0 @@

package/src/index.ts DELETED Viewed

@@ -1,49 +0,0 @@
-import { TINY_SPARK } from "../types"
-import { getCharts, observe, createLineChart, hasDataset } from "./lib"
-(function MAIN() {
-    window.addEventListener('load', () => {
-        const charts = getCharts();
-        if (!charts.length) return;
-        Array.from(charts).forEach((chart) => {
-            CHECK(chart as TINY_SPARK);
-            (chart as TINY_SPARK).__renderCount = 0;
-            RENDER(chart as TINY_SPARK);
-            observe(chart as TINY_SPARK, () => RENDER(chart as TINY_SPARK));
-            const spy = new ResizeObserver((entries) => {
-                entries.forEach(_ => {
-                    RENDER(chart as TINY_SPARK);
-                });
-            });
-            spy.observe(chart.parentElement!);
-            const mutation = new MutationObserver((mutations) => {
-                mutations.forEach(mutation => {
-                    if (
-                        mutation.type === 'attributes' &&
-                        mutation.attributeName &&
-                        mutation.attributeName.startsWith('data-')
-                    ) {
-                        RENDER(chart as TINY_SPARK);
-                    }
-                });
-            });
-            mutation.observe(chart, { attributes: true });
-        });
-    });
-}());
-function RENDER(chart: TINY_SPARK) {
-    chart.__renderCount += 1;
-    hasDataset(chart, 'set') && createLineChart(chart, chart.__renderCount < 3);
-}
-function CHECK(chart: TINY_SPARK) {
-    if (!chart.dataset.set) {
-        console.error(`Tiny-spark exception:\n\n [data-set] data attribute is missing.\n Provide an array of numbers, for example:\n\n data-set="[1, 2, 3]"`)
-    }
-}

package/src/lib.ts DELETED Viewed

@@ -1,334 +0,0 @@
-import { CHART_TYPE, DATA, TINY_SPARK, POINT, XMLNS, DATA_ATTRIBUTE, ANIMATION_DURATION } from "../types"
-import { animateAreaProgressively, animatePath, createSmoothPath, createStraightPath, SVG } from "./svg";
-export function getCharts() {
-  const charts = document.querySelectorAll('.tiny-spark')
-  return charts
-}
-export function isChartOfType(element: TINY_SPARK, type: CHART_TYPE) {
-  const attrs = Object.keys(element.dataset)
-  return attrs.includes(type)
-}
-export function hasDataset(element: TINY_SPARK, name: string) {
-  const attrs = Object.keys(element.dataset)
-  return attrs.includes(name)
-}
-export function getDatasetValue(element: TINY_SPARK, name: string, fallback: number | string) {
-  if (!hasDataset(element, name)) return fallback;
-  return element.dataset[name]
-}
-export function observe(element: TINY_SPARK, render: () => void) {
-  const observer = new MutationObserver((mutationsList) => {
-    for (const mutation of mutationsList) {
-      if (
-        mutation.type === 'attributes' &&
-        mutation.attributeName &&
-        Object.values(DATA).includes(mutation.attributeName as DATA)
-      ) {
-        render();
-        break;
-      }
-    }
-  });
-  observer.observe(element, { attributes: true });
-  return observer;
-}
-export function getElementColors(element: TINY_SPARK) {
-  if (!element) return {
-    color: '#1A1A1A',
-    backgroundColor: '#FFFFFF'
-  };
-  const computedStyle = window.getComputedStyle(element);
-  const color = computedStyle.getPropertyValue('color') || '#1A1A1A';
-  const backgroundColor = computedStyle.getPropertyValue('background-color');
-  const background = computedStyle.getPropertyValue('background');
-  const bg = backgroundColor || background || '#FFFFFF';
-  return { color, backgroundColor: bg };
-}
-export function createUid() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
-    .replace(/[xy]/g, function (c) {
-      const r = Math.random() * 16 | 0,
-        v = c == 'x' ? r : (r & 0x3 | 0x8);
-      return v.toString(16);
-    });
-}
-export function parseDataset(chart: TINY_SPARK) {
-  const dataSetStr = chart.getAttribute('data-set');
-  if (!dataSetStr) return [];
-  try {
-    const parsed = JSON.parse(dataSetStr);
-    if (Array.isArray(parsed) && parsed.every(item => typeof item === 'number' || [null, undefined].includes(item))) {
-      return parsed;
-    }
-    console.warn('data-set is not an array of numbers.');
-    return [];
-  } catch (error) {
-    console.error('Error parsing data-set:', error);
-    return [];
-  }
-}
-function getDates(chart: TINY_SPARK) {
-  const dates = chart.getAttribute('data-dates');
-  if (!dates) return []
-  try {
-    const parsed = JSON.parse(dates);
-    if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {
-      return parsed;
-    }
-    console.warn('data-dates is not an array of strings');
-    return [];
-  } catch (error) {
-    console.error('Error parsing data-dates', error);
-    return [];
-  }
-}
-export function minMax(dataset: number[]) {
-  return {
-    min: Math.min(...dataset),
-    max: Math.max(...dataset)
-  }
-}
-export function nextTick() {
-  return new Promise(resolve => setTimeout(resolve, 0));
-}
-export function localeNum(chart: TINY_SPARK, num: number) {
-  const locale = String(getDatasetValue(chart, DATA_ATTRIBUTE.NUMBER_LOCALE, navigator.language || 'en-US'));
-  const rounding = Number(String(getDatasetValue(chart, DATA_ATTRIBUTE.NUMBER_ROUNDING, 0)));
-  return num.toLocaleString(locale, {
-    useGrouping: true,
-    minimumFractionDigits: rounding,
-    maximumFractionDigits: rounding
-  });
-}
-export function domPlot(svg: SVGSVGElement, svgX: number, svgY: number) {
-  if (!svg.createSVGPoint || !svg.getScreenCTM) {
-    throw new Error("Your browser does not support SVG coordinate transformation.");
-  }
-  const screenCTM = svg.getScreenCTM();
-  if (!screenCTM) {
-    throw new Error("Cannot obtain the screen CTM.");
-  }
-  const point = svg.createSVGPoint();
-  point.x = svgX;
-  point.y = svgY;
-  const domPoint = point.matrixTransform(screenCTM);
-  return { x: domPoint.x, y: domPoint.y };
-}
-export function tooltip(svg: SVGSVGElement, chart: TINY_SPARK, point: POINT, id: string, show: boolean) {
-  nukeTooltip(id);
-  if (!show) return;
-  const { x, y } = domPlot(svg, point.x, point.y);
-  const tool = document.createElement('div');
-  tool.classList.add('tiny-spark-tooltip');
-  tool.setAttribute('id', `tooltip_${id}`);
-  tool.style.pointerEvents = 'none';
-  tool.style.position = 'fixed';
-  tool.style.top = y + 'px';
-  tool.style.left = x + 'px';
-  tool.style.width = 'fit-content';
-  tool.innerHTML = `
-    <div class="tiny-spark-tooltip-content">${!point.d ? '' : `${point.d}: `}${[null, undefined].includes(point.v as any) ? '-' : localeNum(chart, Number(point.v))}</div>
-  `
-  document.body.appendChild(tool);
-  nextTick().then(() => {
-    const { width, height } = tool.getBoundingClientRect()
-    tool.style.left = `${x - width / 2}px`;
-    tool.style.top = `${y - height - Number(String(Number(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 3)) * 1.5))}px`
-  })
-}
-export function nukeTooltip(id: string) {
-  const t = document.getElementById(`tooltip_${id}`);
-  t?.remove();
-}
-/////////////////////////////////////////////////////
-function clear(chart: TINY_SPARK) {
-  chart.innerHTML = ''
-}
-export function createLineChart(chart: TINY_SPARK, firstTime: boolean) {
-  let animate = firstTime;
-  clear(chart);
-  const { svg, svgId, width, height } = SVG(chart);
-  const { color, backgroundColor } = getElementColors(chart)
-  const padding = { T: 12, R: 12, B: 12, L: 12 };
-  // DRAWING AREA
-  const area = {
-    left: padding.L,
-    top: padding.T,
-    width: width - padding.L - padding.R,
-    height: height - padding.T - padding.B,
-    bottom: height - padding.B,
-    right: width - padding.R
-  };
-  const dataset = parseDataset(chart);
-  const { min: MIN } = minMax(dataset);
-  const positiveDataset = dataset.map(d => {
-    return [null, undefined].includes(d) ? d : d + (MIN < 0 ? Math.abs(MIN) : 0)
-  });
-  const { max } = minMax(positiveDataset);
-  const slot = area.width / (dataset.length - 1) === Infinity ? area.width : area.width / (dataset.length - 1);
-  const dates = getDates(chart);
-  // DATAPOINTS
-  const allPoints = positiveDataset.map((d, i) => {
-    const uniqueCase = {
-      w: positiveDataset.length === 1 ? slot / 2 : 0,
-      h: positiveDataset.length === 1 ? area.height / 2 : 0
-    }
-    return {
-      y: ((1 - ((d || 0) / max)) * area.height) + padding.T + uniqueCase.h,
-      x: area.left + ((slot * i)) + uniqueCase.w,
-      v: d,
-      d: dates[i] || null
-    }
-  })
-  const points = [...allPoints].filter(({ v }) => ![null, undefined].includes(v));
-  // PATH & AREA
-  const path = document.createElementNS(XMLNS, 'path');
-  path.classList.add('tiny-spark-line-path');
-  if (!chart.dataset.curve || chart.dataset.curve === 'true') {
-    path.setAttribute('d', `M ${createSmoothPath(points)}`);
-  } else {
-    path.setAttribute('d', `M ${createStraightPath(points)}`);
-  }
-  path.setAttribute('fill', 'none');
-  path.setAttribute('stroke', String(getDatasetValue(chart, DATA_ATTRIBUTE.LINE_COLOR, color)));
-  path.setAttribute('stroke-width', String(getDatasetValue(chart, DATA_ATTRIBUTE.LINE_THICKNESS, 2)));
-  path.setAttribute('stroke-linecap', 'round');
-  const pathArea = document.createElementNS(XMLNS, 'path');
-  pathArea.classList.add('tiny-spark-line-area');
-  if (allPoints.length) {
-    if (!chart.dataset.curve || chart.dataset.curve === 'true') {
-      pathArea.setAttribute('d', `M ${points[0].x},${area.bottom} ${createSmoothPath(points)} L ${points.at(-1)!.x},${area.bottom} Z`);
-    } else {
-      pathArea.setAttribute('d', `M ${points[0].x},${area.bottom} ${createStraightPath(points)} L ${points.at(-1)!.x},${area.bottom} Z`);
-    }
-  }
-  pathArea.setAttribute('fill', String(getDatasetValue(chart, DATA_ATTRIBUTE.AREA_COLOR, 'transparent')));
-  if (allPoints.length > 1) {
-    svg.appendChild(pathArea);
-    svg.appendChild(path);
-  }
-  const animation = chart.getAttribute('data-animation');
-  const indicators: SVGLineElement[] = [];
-  // VERTICAL INDICATOR
-  allPoints.forEach((_, i) => {
-    const indicator = document.createElementNS(XMLNS, 'line');
-    indicator.classList.add('tiny-spark-indicator');
-    indicator.setAttribute('id', `indicator_${svgId}_${i}`);
-    indicator.setAttribute('x1', String(area.left + (allPoints.length === 1 ? area.width / 2 : (i * slot))));
-    indicator.setAttribute('x2', String(area.left + (allPoints.length === 1 ? area.width / 2 : (i * slot))));
-    indicator.setAttribute('y1', String(area.top));
-    indicator.setAttribute('y2', String(area.bottom));
-    indicator.setAttribute('stroke', String(getDatasetValue(chart, DATA_ATTRIBUTE.INDICATOR_COLOR, '#1A1A1A')));
-    indicator.setAttribute('stroke-width', String(getDatasetValue(chart, DATA_ATTRIBUTE.INDICATOR_WIDTH, '1')));
-    indicator.setAttribute('stroke-linecap', 'round');
-    indicator.style.pointerEvents = 'none';
-    indicator.style.opacity = '0';
-    indicators.push(indicator);
-    svg.appendChild(indicator);
-  })
-  let plots: SVGCircleElement[] = [];
-  // PLOTS
-  if (Number(String(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 0))) > 0) {
-    allPoints.forEach(({ x, y, v }, i) => {
-      if (![null, undefined].includes(v)) {
-        const circle = document.createElementNS(XMLNS, 'circle');
-        circle.classList.add('tiny-spark-datapoint-circle');
-        circle.classList.add(`circle-${svgId}`);
-        circle.setAttribute('id', `circle_${svgId}_${i}`);
-        circle.setAttribute('cx', String(x));
-        circle.setAttribute('cy', String(y));
-        circle.setAttribute('r', String(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 3)));
-        circle.setAttribute('fill', String(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_COLOR, String(getDatasetValue(chart, 'lineColor', color)))));
-        circle.setAttribute('stroke', backgroundColor);
-        circle.style.transition = `opacity ${i * ((ANIMATION_DURATION * 2) / allPoints.length)}ms ease-in`;
-        circle.style.opacity = '0';
-        svg.appendChild(circle);
-        plots.push(circle);
-      }
-    });
-  }
-  // TOOLTIP TRAPS
-  allPoints.forEach((point, i) => {
-    const trap = document.createElementNS(XMLNS, 'rect');
-    trap.classList.add('tiny-spark-tooltip-trap');
-    trap.setAttribute('x', `${allPoints.length === 1 ? 0 : area.left + i * slot - slot / 2}`);
-    trap.setAttribute('y', `${area.top}`);
-    trap.setAttribute('height', `${area.height}`);
-    trap.setAttribute('width', `${slot}`);
-    trap.setAttribute('fill', 'transparent');
-    trap.addEventListener('mouseenter', () => {
-      tooltip(svg, chart, point, svgId, true);
-      const circle = document.getElementById(`circle_${svgId}_${i}`);
-      circle?.setAttribute('r', String(Number(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 3)) * 1.5))
-      indicators[i].style.opacity = '1';
-    });
-    trap.addEventListener('mouseout', () => {
-      tooltip(svg, chart, point, svgId, false);
-      const circle = document.getElementById(`circle_${svgId}_${i}`);
-      circle?.setAttribute('r', String(Number(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 3))))
-      indicators.forEach(indicator => indicator.style.opacity = '0');
-    });
-    svg.appendChild(trap);
-  });
-  if (animation === 'true' && animate) {
-    nextTick().then(() => {
-      plots.forEach(circle => {
-        circle.style.opacity = '1'
-      })
-      animatePath(path);
-      animateAreaProgressively(svg as unknown as TINY_SPARK, pathArea);
-    })
-  } else {
-    plots.forEach(circle => {
-      circle.style.opacity = '1'
-    })
-  }
-  chart.appendChild(svg);
-}

package/src/main.ts DELETED Viewed

@@ -1,33 +0,0 @@
-import './style.css'
-function makeDs(n: number) {
-  let arr = [];
-  for(let i = 0; i < n; i += 1) {
-    arr.push(Math.random());
-  }
-  return arr.toString();
-}
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-<div style="width:100%">
-<div
-  class="tiny-spark"
-  data-curve="true"
-  data-animation="true"
-  data-line-color="#4A4A4A"
-  data-area-color="#1A1A1A10"
-  data-line-thickness="3"
-  data-responsive
-  data-plot-color="#2A2A2A"
-  data-plot-radius="3"
-  data-number-locale="en-US"
-  data-number-rounding="2"
-  data-indicator-color="#1A1A1A"
-  data-indicator-width="1"
-  data-set="[${makeDs(6)}]"
-  data-dates='["jan", "feb", "mar", "apr", "may", "jun"]'
->
-</div>
-</div>
-`
-import './index'

package/src/style.css DELETED Viewed

@@ -1,111 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-height: 100vh;
-}
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-.card {
-  padding: 2em;
-}
-.read-the-docs {
-  color: #888;
-}
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-.tiny-spark {
-  background-color: #9A9A9A;
-}
-#app {
-  width: 100%;
-}
-.tiny-spark-tooltip {
-  border-radius: 3px;
-  padding: 0 12px;
-  font-size: 10px;
-  /* display: none; */
-  /* background: red; */
-}

package/src/svg.ts DELETED Viewed

@@ -1,126 +0,0 @@
-import { TINY_SPARK, POINT, XMLNS, ANIMATION_DURATION } from "../types";
-import { createUid } from "./lib";
-export function SVG(chart: TINY_SPARK) {
-    const { width, height } = chart.parentElement!.getBoundingClientRect();
-    const fallback = { width: 300, height: 100 };
-    const viewBox = `0 0 ${width || fallback.width} ${height || fallback.height}`;
-    const svg = document.createElementNS(XMLNS, 'svg');
-    const id = createUid();
-    svg.id = id;
-    svg.setAttribute('viewBox', viewBox);
-    svg.style.width = '100%';
-    svg.style.height = '100%';
-    return {
-        svg,
-        svgId: id,
-        width: width || fallback.width,
-        height: height || fallback.height
-    }
-}
-export function checkNaN(val: number, fallback = 0) {
-    if (isNaN(val)) {
-        return fallback
-    } else {
-        return val
-    }
-}
-export function createStraightPath(points: POINT[]) {
-    let arr = [];
-    for (let i = 0; i < points.length; i += 1) {
-        arr.push(`${checkNaN(points[i].x)},${checkNaN(points[i].y)} `)
-    }
-    return arr.join(' ').trim()
-}
-export function createSmoothPath(points: POINT[]) {
-    if (points.length < 1) return '0,0';
-    const n = points.length - 1;
-    const path = [`${checkNaN(points[0].x)},${checkNaN(points[0].y)}`];
-    const dx = [], dy = [], slopes = [], tangents = [];
-    for (let i = 0; i < n; i += 1) {
-        dx[i] = points[i + 1].x - points[i].x;
-        dy[i] = points[i + 1].y - points[i].y;
-        slopes[i] = dy[i] / dx[i];
-    }
-    tangents[0] = slopes[0];
-    tangents[n] = slopes[n - 1];
-    for (let i = 1; i < n; i += 1) {
-        if (slopes[i - 1] * slopes[i] <= 0) {
-            tangents[i] = 0;
-        } else {
-            const harmonicMean = (2 * slopes[i - 1] * slopes[i]) / (slopes[i - 1] + slopes[i]);
-            tangents[i] = harmonicMean;
-        }
-    }
-    for (let i = 0; i < n; i += 1) {
-        const x1 = points[i].x;
-        const y1 = points[i].y;
-        const x2 = points[i + 1].x;
-        const y2 = points[i + 1].y;
-        const m1 = tangents[i];
-        const m2 = tangents[i + 1];
-        const controlX1 = x1 + (x2 - x1) / 3;
-        const controlY1 = y1 + m1 * (x2 - x1) / 3;
-        const controlX2 = x2 - (x2 - x1) / 3;
-        const controlY2 = y2 - m2 * (x2 - x1) / 3;
-        path.push(`C ${checkNaN(controlX1)},${checkNaN(controlY1)} ${checkNaN(controlX2)},${checkNaN(controlY2)} ${checkNaN(x2)},${checkNaN(y2)}`);
-    }
-    return path.join(' ');
-}
-export function animatePath(path: SVGPathElement, duration = ANIMATION_DURATION) {
-    const totalLength = path.getTotalLength();
-    path.style.strokeDasharray = String(totalLength);
-    path.style.strokeDashoffset = String(totalLength);
-    path.getBoundingClientRect();
-    path.style.transition = `stroke-dashoffset ${duration}ms ease-in-out`;
-    path.style.strokeDashoffset = '0';
-    path.addEventListener('transitionend', function handler() {
-        path.style.transition = '';
-        path.removeEventListener('transitionend', handler);
-    });
-}
-export function animateAreaProgressively(svg: TINY_SPARK, areaElement: SVGPathElement, duration = ANIMATION_DURATION) {
-    const bbox = areaElement.getBBox();
-    const fullWidth = bbox.width;
-    const clipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-    const clipId = "clip-" + Math.random().toString(36).substr(2, 9);
-    clipPath.setAttribute("id", clipId);
-    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    rect.setAttribute("x", bbox.x.toString());
-    rect.setAttribute("y", bbox.y.toString());
-    rect.setAttribute("width", "0");
-    rect.setAttribute("height", bbox.height.toString());
-    clipPath.appendChild(rect);
-    let defs = svg.querySelector("defs");
-    if (!defs) {
-        defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-        svg.insertBefore(defs, svg.firstChild);
-    }
-    defs.appendChild(clipPath);
-    areaElement.setAttribute("clip-path", `url(#${clipId})`);
-    rect.style.transition = `width ${duration}ms ease-out`;
-    rect.getBoundingClientRect();
-    rect.setAttribute("width", fullWidth.toString());
-    rect.addEventListener("transitionend", function handler() {
-        areaElement.removeAttribute("clip-path");
-        clipPath.parentNode && clipPath.parentNode.removeChild(clipPath);
-        rect.removeEventListener("transitionend", handler);
-    });
-}

package/src/typescript.svg DELETED Viewed

@@ -1 +0,0 @@

- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/src/vite-env.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- /// <reference types="vite/client" />

package/tsconfig.json DELETED Viewed

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

package/types/index.ts DELETED Viewed

@@ -1,42 +0,0 @@
-export type TINY_SPARK = HTMLDivElement & {
-    __renderCount: number
-}
-export const XMLNS = 'http://www.w3.org/2000/svg'
-export const ANIMATION_DURATION = 1000;
-export enum CHART_TYPE {
-    BAR = 'bar',
-    LINE = 'line'
-}
-export enum CHART {
-    BAR = `data-${CHART_TYPE.BAR}`,
-    LINE = `data-${CHART_TYPE.LINE}`
-}
-export enum DATA {
-    BAR = CHART.BAR,
-    LINE = CHART.LINE,
-    SET = 'data-set',
-    RESPONSIVE = 'data-responsive'
-}
-export type POINT = { x: number; y: number, v: number | null | undefined, d: string | null | undefined }
-export enum DATA_ATTRIBUTE {
-    ANIMATION = 'animation',
-    AREA_COLOR = 'areaColor',
-    CURVE = 'curve',
-    DATES = 'dates',
-    INDICATOR_COLOR = 'indicatorColor',
-    INDICATOR_WIDTH = 'indicatorWidth',
-    LINE_COLOR = 'lineColor',
-    LINE_THICKNESS = 'lineThickness',
-    NUMBER_LOCALE = 'numberLocale',
-    NUMBER_ROUNDING = 'numberRounding',
-    NUMBER_SHOW_ON = 'numberShowOn',
-    PLOT_COLOR = 'plotColor',
-    PLOT_RADIUS = 'plotRadius',
-    SET = 'set',
-}

package/vite.config.ts DELETED Viewed

@@ -1,18 +0,0 @@
-import { defineConfig } from 'vite'
-export default defineConfig({
-  build: {
-    lib: {
-      entry: 'src/index.ts',
-      name: 'tiny-spark',
-      fileName: (format) => `tiny-spark.${format}.js`,
-      formats: ['es', 'umd'],
-    },
-    rollupOptions: {
-      external: [],
-      output: {
-        globals: {}
-      }
-    }
-  }
-})