@triptease/tt-bar-chart 0.0.1

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@triptease/tt-bar-chart",
+  "description": "Webcomponent tt-bar-chart following open-wc recommendations",
+  "license": "MIT",
+  "author": "tt-bar-chart",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./tt-bar-chart.js": "./dist/src/tt-bar-chart.js"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
+    "build": "yarn build:node && yarn build:web && npm run analyze -- --exclude dist",
+    "build:node": "tsc",
+    "build:node:watch": "tsc --watch",
+    "build:web": "node ../../scripts/esbuild.mjs",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "test": "tsc && wtr",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "chart.js": "^4.5.1",
+    "echarts": "^6.0.0",
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@open-wc/testing": "^4.0.0",
+    "@types/mocha": "^10.0.7",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.18.2",
+    "concurrently": "^8.2.2",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "customElements": "custom-elements.json"
+}

package/src/TtBarChart.ts

@@ -0,0 +1,82 @@
+import { html, LitElement } from 'lit';
+// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
+import * as echarts from 'echarts';
+import { property } from 'lit/decorators.js';
+
+interface Dataset {
+  label: string;
+  data: number[];
+  color?: string;
+}
+
+const jsonConvertor = (value: string | null) => (value ? JSON.parse(value) : undefined);
+export class TtBarChart extends LitElement {
+  @property({ type: Array, converter: jsonConvertor, attribute: 'categories' })
+  labels?: string[];
+
+  @property({ type: Array, converter: jsonConvertor })
+  datasets?: Dataset[];
+
+  @property({ type: String })
+  direction?: 'horizontal' | 'vertical' = 'horizontal';
+
+  @property({ type: Boolean, attribute: 'show-grid' })
+  showGrid: boolean = false;
+
+  @property({ type: Boolean, attribute: 'show-legend' })
+  showLegend: boolean = false;
+
+  @property({ type: String })
+  width: string = '600px';
+
+  @property({ type: String })
+  height: string = '400px';
+
+  private getSeriesColor = (dataset: Dataset) => {
+    if (this.datasets && this.datasets.length > 1) return undefined;
+    if (dataset.color) return dataset.color;
+
+    return '#4d35a1';
+  };
+
+  render() {
+    return html` <div>
+      <div id=${this.id} style="width: ${this.width}; height:${this.height};"></div>
+    </div>`;
+  }
+
+  protected firstUpdated() {
+    const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;
+
+    if (!divElement) {
+      throw new Error('No div element');
+    }
+
+    const chart = echarts.init(divElement);
+
+    const series: echarts.SeriesOption[] = (this.datasets || []).map((dataset) => ({
+      name: dataset.label,
+      type: 'bar',
+      data: dataset.data,
+      color: this.getSeriesColor(dataset),
+    }));
+    const option: echarts.EChartsOption = {
+      legend: {
+        show: this.showLegend,
+      },
+      xAxis: {
+        type: this.direction === 'horizontal' ? 'value' : 'category',
+        data: this.direction === 'horizontal' ? undefined : this.labels,
+        splitLine: { show: this.showGrid },
+      },
+      yAxis: {
+        type: this.direction === 'horizontal' ? 'category' : 'value',
+        data: this.direction === 'horizontal' ? this.labels : undefined,
+        splitLine: { show: this.showGrid },
+      },
+      series,
+    };
+
+    chart.setOption(option);
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { TtBarChart } from './tt-bar-chart.js';

package/src/tt-bar-chart.ts

@@ -0,0 +1,9 @@
+import { TtBarChart } from './TtBarChart.js';
+
+if (typeof window !== 'undefined') {
+  if (!window.customElements.get('tt-bar-chart')) {
+    window.customElements.define('tt-bar-chart', TtBarChart);
+  }
+}
+
+export { TtBarChart };

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noEmitOnError": true,
+    "lib": ["es2021", "dom", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.js

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.lit] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.js

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'Lit is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});