add ECharts and EChartsAutoSize components

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "no-only-tests", "eslint-comments"],
+  "ignorePatterns": ["node_modules", "dist", "dev", "tsup.config.ts", "vitest.config.ts"],
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": ".",
+    "sourceType": "module"
+  },
+  "rules": {
+    "prefer-const": "warn",
+    "no-console": "warn",
+    "no-debugger": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-unnecessary-type-assertion": "warn",
+    "@typescript-eslint/no-unnecessary-condition": "warn",
+    "@typescript-eslint/no-useless-empty-export": "warn",
+    "no-only-tests/no-only-tests": "warn",
+    "eslint-comments/no-unused-disable": "warn"
+  }
+}

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,31 @@
+name: "🐛 Bug report"
+description: Create a report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting an issue :pray:.
+
+        The more information you fill in, the better the community can help you.
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: Provide a clear and concise description of the challenge you are running into.
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: Minimal Reproduction Link
+      description: |
+        Please provide a link to a minimal reproduction of the bug you are running into.
+        It makes the process of verifying and fixing the bug much easier.
+        Note:
+        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the solid-js and solid-primitives.
+        - To create a shareable code example you can use [Stackblitz](https://stackblitz.com/) (https://solid.new). Please no localhost URLs.
+        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
+      placeholder: |
+        e.g. https://stackblitz.com/edit/...... OR Github Repo
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,27 @@
+name: "Feature Request"
+description: For feature/enhancement requests. Please search for existing issues first.
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for bringing your ideas here :pray:.
+
+        The more information you fill in, the better the community can understand your idea.
+  - type: textarea
+    id: problem
+    attributes:
+      label: Describe The Problem To Be Solved
+      description: Provide a clear and concise description of the challenge you are running into.
+    validations:
+      required: true
+  - type: textarea
+    id: solution
+    attributes:
+      label: Suggest A Solution
+      description: |
+        A concise description of your preferred solution. Things to address include:
+        - Details of the technical implementation
+        - Tradeoffs made in design decisions
+        - Caveats and considerations for the future
+    validations:
+      required: true

.github/workflows/codeql.yml

@@ -0,0 +1,45 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  schedule:
+    - cron: "30 1 * * 0"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      security-events: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: javascript
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1
+        with:
+          upload: false
+          output: sarif-results
+
+      # Only include files that are public
+      - name: filter-sarif
+        uses: advanced-security/filter-sarif@main
+        with:
+          patterns: |
+            /src/**/*.*
+          input: sarif-results/javascript.sarif
+          output: sarif-results/javascript.sarif
+
+      - name: Upload SARIF
+        uses: github/codeql-action/upload-sarif@v1
+        with:
+          sarif_file: sarif-results/javascript.sarif

.github/workflows/format.yml

@@ -0,0 +1,37 @@
+name: Format
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+
+    permissions:
+      # Give the default GITHUB_TOKEN write permission to commit and push the
+      # added or changed files to the repository.
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      # "git restore ." discards changes to package-lock.json
+      - name: Install dependencies
+        run: |
+          pnpm install --no-frozen-lockfile --ignore-scripts
+          git restore .
+
+      - name: Format
+        run: pnpm run format
+
+      - name: Add, Commit and Push
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: 'Format'

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+gitignore
+.idea
+.vscode
+
+# tsup
+tsup.config.bundled_*.{m,c,}s

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "bracketSpacing": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Aleksandr Lesnenko
+
+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.

README.md

@@ -0,0 +1,126 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=echarts-solid&background=tiles&project=%20" alt="echarts-solid">
+</p>
+
+# echarts-solid
+
+[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
+
+`echarts-solid` is a library that provides components for integrating ECharts with SolidJS apps. It includes two main components: `ECharts` and `EChartsAutoSize`, both designed to make it easier to work with ECharts in Solid-based projects.
+
+## Quick start
+
+Install it:
+
+```bash
+npm i echarts-solid echarts
+# or
+yarn add echarts-solid echarts
+# or
+pnpm add echarts-solid echarts
+```
+
+Use it:
+
+```tsx
+import { ECharts } from 'echarts-solid'
+
+function MyChartComponent() {
+  const options = {
+    // ... your ECharts option here
+  };
+
+  return (
+    <ECharts
+      option={options}
+      width={600}
+      height={400}
+    />
+  );
+}
+```
+
+For responsive charts, use the `EChartsAutoSize` component:
+
+```tsx
+import { EChartsAutoSize } from 'echarts-solid'
+
+function MyResponsiveChartComponent() {
+  const options = {
+    // ... your ECharts option here
+  };
+
+  return (
+    <EChartsAutoSize
+      option={options}
+    />
+  );
+}
+```
+
+## Components
+
+### ECharts
+
+`ECharts` is a component that renders an ECharts chart with specified options and styles.
+
+#### Props
+
+- `option`: ECharts `option` object with data and configuration.
+- `width`, `height`: The dimensions of the chart.
+- `initOptions`: Optional parameters for the ECharts instance initialization.
+- `notMerge`: Whether not to merge with previous `option`.
+- `lazyUpdate`: Whether to update chart immediately.
+- `isLoading`: Displays a loading animation when the chart is being prepared or data is being fetched.
+- `loadingOptions`: The options for the loading animation.
+- `resizeOptions`: Options to pass to ECharts' resize method.
+- `theme`: Theme to be applied to the chart instance.
+- `eventHandlers`: An object to attach event handlers to the chart instance.
+- `onInit`: Callback function that is invoked with the chart instance when it is initialized.
+- `class`, `style`: Standard HTML attributes for styling.
+- `ref`: Ref of the div element that is used for the chart.
+
+### EChartsAutoSize
+
+`EChartsAutoSize` is similar to `ECharts` but automatically adjusts its size based on its container's size.
+
+#### Props
+
+It has all the same props as ECharts, except for width and height because it adjusts to the chart element's size.
+
+## Events
+
+You can attach event handlers to different chart events by passing an `eventHandlers` object. Each key is the event name, and the value can be the handler function or an object with `query` for filtering and `handler` for the function itself.
+
+```tsx
+const eventHandlers = {
+  'click': (event: ECElementEvent) => {
+    console.log('Chart is clicked!', event);
+  }
+};
+
+<EChartsAutoSize
+  option={options}
+  eventHandlers={eventHandlers}
+/>
+```
+
+## Loading State
+
+You can control the display of a loading animation by using the `isLoading` and `loadingOptions` props:
+
+```tsx
+<EChartsAutoSize
+  option={options}
+  isLoading={true}
+  loadingOptions={{ text: 'Data is loading...' }}
+/>
+```
+
+## Contributing
+
+Contributions to the `echarts-solid` library are encouraged and appreciated.
+
+## License
+
+`echarts-solid` is [MIT licensed](./LICENSE).

dev/App.module.css

@@ -0,0 +1,8 @@
+.App {
+  padding: 2rem;
+}
+
+.ChartContainer {
+  width: 100%;
+  height: 400px;
+}