@flowtools/uplot 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Mentalhouse Oy - Open Source
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# Vue Typescript Bundle Template
+
+![Vue Typescript Bundle Template](https://github.com/productdevbookcom/assets/blob/main/vue-ts-bundle-template.jpg?raw=true)
+
+
+This is a template for creating a Typescript bundle. It is based on the [Typescript](https://www.typescriptlang.org/) compiler with the [Vite](https://vitejs.dev/) bundler.
+
+## Features
+
+- [x] [Typescript](https://www.typescriptlang.org/)
+- [x] [Vite](https://vitejs.dev/)
+- [x] [Vue](https://vuejs.org/)
+- [x] [Vue Macros](https://github.com/sxzz/unplugin-vue-macros)
+- [x] [ESLint](https://eslint.org/) with [Antfu's ESLint Config](https://github.com/antfu/eslint-config)
+- [x] [Bumpp](https://github.com/antfu/bumpp) github changelog generator
+- [x] [Vitest](https://vitest.dev/)
+- [x] [Pnpm](https://pnpm.io/)
+- [x] [GitHub Actions]()
+- [x] [NPM Local Registry]()
+- [x] [Renovate]()
+
+
+## Usage
+
+1. To use this template, click the "Use this template" button above.
+2. Clone the repository to your local machine.
+3. Run `pnpm install` to install the dependencies.
+4. Run `pnpm build` to build the bundle.
+5. Run `pnpm start` to start the bundle.
+6. Run `pnpm lint` to lint the code. (You can also run `pnpm lint:fix` to fix the linting errors.)
+7. Run `pnpm test` to run the tests. (You can also run `pnpm test:watch` to run the tests in watch mode.)
+8. Run `pnpm release` to bump the version. Terminal will ask you to select the version type. And then it will automatically commit and push the changes. GitHub Actions will automatically publish git tags. NPM local registry will automatically publish the package.
+
+## Configuration
+
+### Github Secrets
+
+[Github Token](https://github.com/settings/tokens) is required github changelog generator. You can create a token.  Select the `repo` scope. Then add the token to the repository secrets. 
+
+`REPOCHANGELOG_TOKEN` - add the token to the repository secrets.
+
+### Renovate
+
+[Setup Github App](https://github.com/apps/renovate) for Renovate.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as Uplot } from './components/Uplot.vue';

package/dist/index.es.js

@@ -0,0 +1,176 @@
+import { defineComponent as E, ref as U, onMounted as V, watch as b, nextTick as $, openBlock as p, createElementBlock as u, renderSlot as O, unref as _, createElementVNode as g, createTextVNode as B, toDisplayString as h, createCommentVNode as A, Fragment as P, renderList as N, normalizeClass as L, normalizeStyle as k } from "vue";
+import M from "uplot";
+import { useElementSize as F, useVModel as C } from "@vueuse/core";
+const j = (a) => {
+  if (typeof a == "object" && a !== null) {
+    if (typeof Object.getPrototypeOf == "function") {
+      const r = Object.getPrototypeOf(a);
+      return r === Object.prototype || r === null;
+    }
+    return Object.prototype.toString.call(a) === "[object Object]";
+  }
+  return !1;
+}, c = (...a) => a.reduce((r, l) => {
+  if (Array.isArray(l))
+    throw new TypeError(
+      "Arguments provided to ts-deepmerge must be objects, not arrays."
+    );
+  return l && Object.keys(l).forEach((o) => {
+    ["__proto__", "constructor", "prototype"].includes(o) || (Array.isArray(r[o]) && Array.isArray(l[o]) ? r[o] = c.options.mergeArrays ? Array.from(new Set(r[o].concat(l[o]))) : l[o] : j(r[o]) && j(l[o]) ? r[o] = c(r[o], l[o]) : r[o] = l[o]);
+  }), r;
+}, {}), T = {
+  mergeArrays: !0
+};
+c.options = T;
+c.withOptions = (a, ...r) => {
+  c.options = {
+    mergeArrays: !0,
+    ...a
+  };
+  const l = c(...r);
+  return c.options = T, l;
+};
+const q = { class: "__uplot-root" }, G = {
+  key: 0,
+  class: "extra-info"
+}, H = /* @__PURE__ */ g("br", null, null, -1), I = { style: { "text-align": "left" } }, J = { class: "__uplot-legend" }, K = ["onClick"], Q = {
+  key: 1,
+  class: "__uplot-legend-value"
+}, R = {
+  key: 2,
+  class: "__uplot-legend-value"
+}, ee = /* @__PURE__ */ E({
+  __name: "Uplot",
+  props: {
+    options: null,
+    data: null,
+    resetScale: { type: Boolean, default: !1 },
+    showDebug: { type: Boolean },
+    zoom: { default: () => [null, null] },
+    series: null
+  },
+  emits: ["select", "cursor", "update:zoom"],
+  setup(a, { expose: r, emit: l }) {
+    const o = a, v = U(), { width: y, height: w } = F(v), x = C(o, "zoom", l, { passive: !0 }), i = C(o, "series", l, { passive: !0 }), D = {
+      title: void 0,
+      legend: {
+        show: !1
+      },
+      hooks: {
+        init: [
+          (e) => {
+            console.log("init", e), i.value = e.series.map((t, s) => ({
+              label: t.label,
+              stroke: typeof t.stroke == "function" ? t.stroke(e, s) : null,
+              value: null,
+              data: null,
+              show: t.show
+              // ...s,
+            }));
+          }
+        ],
+        setCursor: [
+          (e) => {
+            l("cursor", e.cursor), i.value = e.series.map((t, s) => {
+              var d, f;
+              return {
+                label: t.label,
+                stroke: typeof t.stroke == "function" ? t.stroke(e, s) : null,
+                value: e.cursor.idx && e.data[s][e.cursor.idx] ? typeof t.value == "function" ? t.value(e, e.data[s][e.cursor.idx], s, e.cursor.idx) : e.data[s][e.cursor.idx] : null,
+                data: (d = e.cursor) != null && d.idx ? e.data[s][(f = e.cursor) == null ? void 0 : f.idx] : null,
+                show: t.show
+                // ...s,
+              };
+            });
+          }
+        ],
+        setSelect: [
+          (e) => {
+            l("select", e.select), console.log("setSelect", e.select), x.value = [
+              e.posToVal(e.select.left, "x"),
+              e.posToVal(e.select.left + e.select.width, "x")
+            ];
+          }
+        ],
+        setScale: [
+          (e) => {
+            x.value = [
+              e.scales.x.min || null,
+              e.scales.x.max || null
+            ];
+          }
+        ]
+      }
+    };
+    let n;
+    function S() {
+      n && n.destroy(), n = new M({ width: 100, height: 100, ...c(o.options, D) }, o.data, v.value), o.zoom[0] !== null && o.zoom[1] !== null && n.setScale("x", { min: o.zoom[0], max: o.zoom[1] }), setTimeout(() => {
+        z();
+      }, 0);
+    }
+    V(() => {
+      S();
+    }), b([y, w], () => {
+      $(() => {
+        z();
+      });
+    }), b(o.data, (e) => {
+      if (o.resetScale) {
+        n.setData(e);
+        return;
+      }
+      n.setData(e, !0), n.redraw();
+    }), b(o.options, (e, t) => {
+      console.log("watch options", e, t), S();
+    });
+    function z() {
+      n.setSize({ width: y.value, height: w.value }), console.log("resize", n);
+    }
+    function m(e) {
+      var t;
+      n.setSeries(e, { show: !n.series[e].show }), (t = i.value) != null && t[e] && (i.value[e].show = n.series[e].show);
+    }
+    return r({ toggleShow: m }), (e, t) => (p(), u("div", q, [
+      O(e.$slots, "header", {
+        series: _(i),
+        toggleShow: m
+      }),
+      g("div", {
+        ref_key: "el",
+        ref: v,
+        class: "__uplot"
+      }, null, 512),
+      a.showDebug ? (p(), u("div", G, [
+        B(h(_(y)) + " x " + h(_(w)) + " ", 1),
+        H,
+        g("pre", I, h(_(i)), 1)
+      ])) : A("", !0),
+      O(e.$slots, "footer", {
+        series: _(i),
+        toggleShow: m
+      }, () => [
+        g("div", J, [
+          (p(!0), u(P, null, N(_(i), (s, d) => {
+            var f;
+            return p(), u("div", {
+              key: s.label,
+              class: L(["__uplot-legend-serie", [`__uplot-${(f = s.label) == null ? void 0 : f.toLowerCase()}`, `__uplot-i-${d}`]]),
+              style: k({ backgroundColor: s.show ? "" : "lightgrey" }),
+              onClick: (W) => m(d)
+            }, [
+              d !== 0 ? (p(), u("span", {
+                key: 0,
+                style: k({ color: s.stroke || "black" }),
+                class: "__uplot-legend-label"
+              }, h(s.label), 5)) : A("", !0),
+              s.value ? (p(), u("span", Q, h(s.value), 1)) : (p(), u("span", R, "--"))
+            ], 14, K);
+          }), 128))
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  ee as Uplot
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("uplot"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","uplot","@vueuse/core"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i["change-name"]={},i.vue,i.Uplot,i.core))})(this,function(i,e,B,u){"use strict";const P="",w=c=>{if(typeof c=="object"&&c!==null){if(typeof Object.getPrototypeOf=="function"){const r=Object.getPrototypeOf(c);return r===Object.prototype||r===null}return Object.prototype.toString.call(c)==="[object Object]"}return!1},p=(...c)=>c.reduce((r,s)=>{if(Array.isArray(s))throw new TypeError("Arguments provided to ts-deepmerge must be objects, not arrays.");return s&&Object.keys(s).forEach(o=>{["__proto__","constructor","prototype"].includes(o)||(Array.isArray(r[o])&&Array.isArray(s[o])?r[o]=p.options.mergeArrays?Array.from(new Set(r[o].concat(s[o]))):s[o]:w(r[o])&&w(s[o])?r[o]=p(r[o],s[o]):r[o]=s[o])}),r},{}),S={mergeArrays:!0};p.options=S,p.withOptions=(c,...r)=>{p.options={mergeArrays:!0,...c};const s=p(...r);return p.options=S,s};const z={class:"__uplot-root"},E={key:0,class:"extra-info"},O=e.createElementVNode("br",null,null,-1),A={style:{"text-align":"left"}},V={class:"__uplot-legend"},j=["onClick"],C={key:1,class:"__uplot-legend-value"},D={key:2,class:"__uplot-legend-value"},T=e.defineComponent({__name:"Uplot",props:{options:null,data:null,resetScale:{type:Boolean,default:!1},showDebug:{type:Boolean},zoom:{default:()=>[null,null]},series:null},emits:["select","cursor","update:zoom"],setup(c,{expose:r,emit:s}){const o=c,h=e.ref(),{width:g,height:y}=u.useElementSize(h),b=u.useVModel(o,"zoom",s,{passive:!0}),d=u.useVModel(o,"series",s,{passive:!0}),N={title:void 0,legend:{show:!1},hooks:{init:[t=>{console.log("init",t),d.value=t.series.map((l,n)=>({label:l.label,stroke:typeof l.stroke=="function"?l.stroke(t,n):null,value:null,data:null,show:l.show}))}],setCursor:[t=>{s("cursor",t.cursor),d.value=t.series.map((l,n)=>{var f,m;return{label:l.label,stroke:typeof l.stroke=="function"?l.stroke(t,n):null,value:t.cursor.idx&&t.data[n][t.cursor.idx]?typeof l.value=="function"?l.value(t,t.data[n][t.cursor.idx],n,t.cursor.idx):t.data[n][t.cursor.idx]:null,data:(f=t.cursor)!=null&&f.idx?t.data[n][(m=t.cursor)==null?void 0:m.idx]:null,show:l.show}})}],setSelect:[t=>{s("select",t.select),console.log("setSelect",t.select),b.value=[t.posToVal(t.select.left,"x"),t.posToVal(t.select.left+t.select.width,"x")]}],setScale:[t=>{b.value=[t.scales.x.min||null,t.scales.x.max||null]}]}};let a;function k(){a&&a.destroy(),a=new B({width:100,height:100,...p(o.options,N)},o.data,h.value),o.zoom[0]!==null&&o.zoom[1]!==null&&a.setScale("x",{min:o.zoom[0],max:o.zoom[1]}),setTimeout(()=>{x()},0)}e.onMounted(()=>{k()}),e.watch([g,y],()=>{e.nextTick(()=>{x()})}),e.watch(o.data,t=>{if(o.resetScale){a.setData(t);return}a.setData(t,!0),a.redraw()}),e.watch(o.options,(t,l)=>{console.log("watch options",t,l),k()});function x(){a.setSize({width:g.value,height:y.value}),console.log("resize",a)}function _(t){var l;a.setSeries(t,{show:!a.series[t].show}),(l=d.value)!=null&&l[t]&&(d.value[t].show=a.series[t].show)}return r({toggleShow:_}),(t,l)=>(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(t.$slots,"header",{series:e.unref(d),toggleShow:_}),e.createElementVNode("div",{ref_key:"el",ref:h,class:"__uplot"},null,512),c.showDebug?(e.openBlock(),e.createElementBlock("div",E,[e.createTextVNode(e.toDisplayString(e.unref(g))+" x "+e.toDisplayString(e.unref(y))+" ",1),O,e.createElementVNode("pre",A,e.toDisplayString(e.unref(d)),1)])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"footer",{series:e.unref(d),toggleShow:_},()=>[e.createElementVNode("div",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(n,f)=>{var m;return e.openBlock(),e.createElementBlock("div",{key:n.label,class:e.normalizeClass(["__uplot-legend-serie",[`__uplot-${(m=n.label)==null?void 0:m.toLowerCase()}`,`__uplot-i-${f}`]]),style:e.normalizeStyle({backgroundColor:n.show?"":"lightgrey"}),onClick:$=>_(f)},[f!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({color:n.stroke||"black"}),class:"__uplot-legend-label"},e.toDisplayString(n.label),5)):e.createCommentVNode("",!0),n.value?(e.openBlock(),e.createElementBlock("span",C,e.toDisplayString(n.value),1)):(e.openBlock(),e.createElementBlock("span",D,"--"))],14,j)}),128))])])]))}}),U="";i.Uplot=T,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+.uplot,.uplot *,.uplot *:before,.uplot *:after{box-sizing:border-box}.uplot{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5;width:min-content}.u-title{text-align:center;font-size:18px;font-weight:700}.u-wrap{position:relative;user-select:none}.u-over,.u-under{position:absolute}.u-under{overflow:hidden}.uplot canvas{display:block;position:relative;width:100%;height:100%}.u-axis{position:absolute}.u-legend{font-size:14px;margin:auto;text-align:center}.u-inline{display:block}.u-inline *{display:inline-block}.u-inline tr{margin-right:16px}.u-legend th{font-weight:600}.u-legend th>*{vertical-align:middle;display:inline-block}.u-legend .u-marker{width:1em;height:1em;margin-right:4px;background-clip:padding-box!important}.u-inline.u-live th:after{content:":";vertical-align:middle}.u-inline:not(.u-live) .u-value{display:none}.u-series>*{padding:4px}.u-series th{cursor:pointer}.u-legend .u-off>*{opacity:.3}.u-select{background:rgba(0,0,0,.07);position:absolute;pointer-events:none}.u-cursor-x,.u-cursor-y{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;z-index:100}.u-hz .u-cursor-x,.u-vt .u-cursor-y{height:100%;border-right:1px dashed #607D8B}.u-hz .u-cursor-y,.u-vt .u-cursor-x{width:100%;border-bottom:1px dashed #607D8B}.u-cursor-pt{position:absolute;top:0;left:0;border-radius:50%;border:0 solid;pointer-events:none;will-change:transform;z-index:100;background-clip:padding-box!important}.u-axis.u-off,.u-select.u-off,.u-cursor-x.u-off,.u-cursor-y.u-off,.u-cursor-pt.u-off{display:none}.__uplot{flex:1 1 auto;min-height:70px;position:relative}.__uplot-root{display:flex;flex-direction:column;width:100%;height:100%}.__uplot .uplot{position:absolute;top:0;left:0;right:0;bottom:0}.__uplot-legend{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;align-content:center;padding:.5em;gap:.25em;font-size:10px}.__uplot-legend-serie{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:center;align-content:center;padding:5px;background-color:#fff;color:#000;border:1px solid lightgray;border-radius:5px;min-width:6em;min-height:4em}.__uplot-i-0{min-width:12em;justify-content:end}.extra-info{position:absolute;bottom:0;left:0;background-color:#fff;color:#000;padding:5px;border:1px solid black}

package/dist/utils/deepmerge.d.ts

@@ -0,0 +1,24 @@
+type TAllKeys<T> = T extends any ? keyof T : never;
+type TIndexValue<T, K extends PropertyKey, D = never> = T extends any ? K extends keyof T ? T[K] : D : never;
+type TPartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>> extends infer O ? {
+    [P in keyof O]: O[P];
+} : never;
+type TFunction = (...a: any[]) => any;
+type TPrimitives = string | number | boolean | bigint | symbol | Date | TFunction;
+type TMerged<T> = [T] extends [Array<any>] ? {
+    [K in keyof T]: TMerged<T[K]>;
+} : [T] extends [TPrimitives] ? T : [T] extends [object] ? TPartialKeys<{
+    [K in TAllKeys<T>]: TMerged<TIndexValue<T, K>>;
+}, never> : T;
+interface IObject {
+    [key: string]: any;
+}
+declare const merge: {
+    <T extends IObject[]>(...objects: T): TMerged<T[number]>;
+    options: IOptions;
+    withOptions<T_1 extends IObject[]>(options: Partial<IOptions>, ...objects: T_1): TMerged<T_1[number]>;
+};
+interface IOptions {
+    mergeArrays: boolean;
+}
+export default merge;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@flowtools/uplot",
+  "version": "0.0.1",
+  "description": "Modern vue component for uplot",
+  "keywords": [
+    "add keywords"
+  ],
+  "homepage": "https://github.com/flow-tools/uplot",
+  "bugs": "https://github.com/flow-tools/uplot",
+  "author": "add author",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flow-tools/uplot.git"
+  },
+  "funding": "https://github.com/sponsors/flow-tools",
+  "engines": {
+    "node": ">=16"
+  },
+  "packageManager": "pnpm@7.28.0",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@vueuse/core": "^9.13.0",
+    "uplot": "^1.6.24",
+    "vue": "=>3.2.47"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.36.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.29.2",
+    "@vue/test-utils": "^2.3.1",
+    "@vueuse/core": "^9.13.0",
+    "bumpp": "^9.0.0",
+    "eslint": "^8.35.0",
+    "jsdom": "^21.1.0",
+    "typescript": "^4.9.5",
+    "uplot": "^1.6.24",
+    "vi-canvas-mock": "^1.0.0",
+    "vite": "^4.1.4",
+    "vite-plugin-dts": "^2.1.0",
+    "vitest": "^0.29.2",
+    "vue": "^3.2.47"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build --mode production",
+    "dev": "vite",
+    "release": "pnpm build && bumpp --commit --push --tag && pnpm publish",
+    "lint": "eslint --ext .ts,.tsx,.js,.jsx .",
+    "lint:fix": "eslint --ext .ts,.tsx,.js,.jsx . --fix",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "coverage": "vitest run --coverage"
+  }
+}