Merge pull request #45 from VisActor/feat/site-theme-demo

Feat: site theme demo-page component
VisActor · Jun 12, 2024 · 311d0f8 · 311d0f8
2 parents 8075881 + b7f4b77
commit 311d0f8
Show file tree

Hide file tree

Showing 45 changed files with 1,974 additions and 146 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/vchart-theme-demo-component/.eslintrc.js b/packages/vchart-theme-demo-component/.eslintrc.js
@@ -0,0 +1,19 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  extends: ['@internal/eslint-config/profile/react'],
+  overrides: [
+    {
+      files: ['**/__tests__/**', '**/*.test.ts'],
+      // 测试文件允许以下规则
+      rules: {
+        '@typescript-eslint/no-empty-function': 'off',
+        'no-console': 'off',
+        'dot-notation': 'off',
+        'promise/catch-or-return': 'off'
+      }
+    }
+  ],
+  parserOptions: { tsconfigRootDir: __dirname, project: './tsconfig.eslint.json' },
+  ignorePatterns: ['scripts/**', 'bundler.config.js']
+};
diff --git a/packages/vchart-theme-demo-component/README.md b/packages/vchart-theme-demo-component/README.md
@@ -0,0 +1,11 @@
+# @visactor/vchart-theme-demo-component
+
+## Description
+
+theme demo page in vchart site
+
+## Usage
+
+```typescript
+import { xxx } from '@visactor/vchart-theme-demo-component';
+```
diff --git a/packages/vchart-theme-demo-component/bundler.config.js b/packages/vchart-theme-demo-component/bundler.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {Partial<import('@internal/bundler').Config>}
+ */
+module.exports = {
+  formats: ['cjs', 'es'],
+  outputDir: {
+    es: 'esm',
+    cjs: 'cjs'
+  }
+};
diff --git a/packages/vchart-theme-demo-component/demo/index.html b/packages/vchart-theme-demo-component/demo/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/vchart-theme-demo-component/demo/src/App.tsx b/packages/vchart-theme-demo-component/demo/src/App.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Frame as ChartHubThemePage } from '../../src/vchart-chart-hub-theme/frame';
+import './index.less';
+
+function App() {
+  return (
+    <div className="theme-demo-container">
+      <div className="theme-demo-iframe">
+        <ChartHubThemePage />;
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/packages/vchart-theme-demo-component/demo/src/index.less b/packages/vchart-theme-demo-component/demo/src/index.less
@@ -0,0 +1,30 @@
+.theme-demo-container {
+  width: 100%;
+  height: 100%;
+  background: var(--color-fill-2);
+  display: flex;
+  flex-direction: column;
+}
+
+@theme-demo-iframe-margin: 30px;
+
+.theme-demo-iframe {
+  margin: @theme-demo-iframe-margin;
+  width: calc(100% - @theme-demo-iframe-margin * 2);
+  height: calc(100% - @theme-demo-iframe-margin * 2);
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  min-width: 1100px;
+}
+
+.theme-demo-description {
+  margin: -20px @theme-demo-iframe-margin - 10px -10px;
+  a {
+    color: rgb(var(--arcoblue-6));
+  }
+}
+
+.theme-demo-description h2 {
+  margin-top: 1em !important;
+}
diff --git a/packages/vchart-theme-demo-component/demo/src/index.tsx b/packages/vchart-theme-demo-component/demo/src/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.tsx';
+
+ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);
diff --git a/packages/vchart-theme-demo-component/demo/src/vite-env.d.ts b/packages/vchart-theme-demo-component/demo/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/vchart-theme-demo-component/demo/tsconfig.json b/packages/vchart-theme-demo-component/demo/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/packages/vchart-theme-demo-component/demo/tsconfig.node.json b/packages/vchart-theme-demo-component/demo/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/vchart-theme-demo-component/demo/vite.config.ts b/packages/vchart-theme-demo-component/demo/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react({ jsxRuntime: 'classic' })]
+});
diff --git a/packages/vchart-theme-demo-component/package.json b/packages/vchart-theme-demo-component/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@visactor/vchart-theme-demo-component",
+  "version": "1.11.1",
+  "description": "theme demo page in vchart site",
+  "sideEffects": false,
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "files": [
+    "cjs",
+    "esm"
+  ],
+  "scripts": {
+    "compile": "tsc --noEmit",
+    "eslint": "eslint --debug --fix src/",
+    "build": "bundle --clean --less true",
+    "dev": "bundle --clean -f es -w",
+    "start": "vite ./demo",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@douyinfe/semi-ui": "^2.51.3",
+    "@douyinfe/semi-icons": "latest",
+    "@douyinfe/semi-icons-lab": "latest",
+    "@arco-design/web-react": "^2.32.2",
+    "@visactor/vchart-theme-utils": "workspace:1.11.1",
+    "@visactor/vchart-theme": "workspace:1.11.1",
+    "@visactor/vchart": "1.11.0",
+    "@visactor/react-vchart": "1.11.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
+  },
+  "devDependencies": {
+    "@internal/bundler": "workspace:*",
+    "@internal/eslint-config": "workspace:*",
+    "@internal/ts-config": "workspace:*",
+    "@internal/jest-config": "workspace:*",
+    "@rushstack/eslint-patch": "~1.1.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react": "^4.1.1",
+    "eslint": "~8.18.0",
+    "vite": "^4.5.0",
+    "typescript": "4.9.5",
+    "react-device-detect": "^2.2.2",
+    "@types/jest": "~29.5.0",
+    "@types/offscreencanvas": "2019.6.4",
+    "@types/node": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/vchart-theme-demo-component/src/declaration.d.ts b/packages/vchart-theme-demo-component/src/declaration.d.ts
@@ -0,0 +1,23 @@
+// @ts-ignore
+declare module '*.less' {
+  const classes: { [className: string]: string };
+  export default classes;
+}
+
+declare module '*/settings.json' {
+  const value: {
+    colorWeek: boolean;
+    navbar: boolean;
+    menu: boolean;
+    footer: boolean;
+    themeColor: string;
+    menuWidth: number;
+  };
+
+  export default value;
+}
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
diff --git a/packages/vchart-theme-demo-component/src/global.d.ts b/packages/vchart-theme-demo-component/src/global.d.ts
@@ -0,0 +1 @@
+declare const __VERSION__: string;
diff --git a/packages/vchart-theme-demo-component/src/index.ts b/packages/vchart-theme-demo-component/src/index.ts
@@ -0,0 +1,2 @@
+import { Frame as ChartHubThemePage } from './vchart-chart-hub-theme/index';
+export { ChartHubThemePage };
diff --git a/packages/vchart-theme-demo-component/src/interface.ts b/packages/vchart-theme-demo-component/src/interface.ts
@@ -0,0 +1,8 @@
+import type { IInitOption } from '@visactor/vchart';
+
+export interface IChartInfo {
+  spec: any;
+  option?: IInitOption;
+  title: string;
+  description?: string;
+}
diff --git a/packages/vchart-theme-demo-component/src/spec/area.ts b/packages/vchart-theme-demo-component/src/spec/area.ts
@@ -0,0 +1,66 @@
+export const areaSpec = {
+  type: 'area',
+  seriesMark: 'line',
+  data: {
+    values: [
+      { type: 'Nail polish', country: 'Africa', value: 4229 },
+      { type: 'Nail polish', country: 'China', value: 3054 },
+      { type: 'Nail polish', country: 'USA', value: 12814 },
+      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+      { type: 'Rouge', country: 'Africa', value: 5221 },
+      { type: 'Rouge', country: 'China', value: 7004 },
+      { type: 'Rouge', country: 'USA', value: 11624 },
+      { type: 'Lipstick', country: 'Africa', value: 9256 },
+      { type: 'Lipstick', country: 'China', value: 9054 },
+      { type: 'Lipstick', country: 'USA', value: 8814 },
+      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+      { type: 'Eyeshadows', country: 'China', value: 12043 },
+      { type: 'Eyeshadows', country: 'USA', value: 12998 },
+      { type: 'Eyeliner', country: 'Africa', value: 5432 },
+      { type: 'Eyeliner', country: 'China', value: 15067 },
+      { type: 'Eyeliner', country: 'USA', value: 12321 },
+      { type: 'Foundation', country: 'Africa', value: 13701 },
+      { type: 'Foundation', country: 'China', value: 10119 },
+      { type: 'Foundation', country: 'USA', value: 10342 },
+      { type: 'Lip gloss', country: 'Africa', value: 4008 },
+      { type: 'Lip gloss', country: 'China', value: 12043 },
+      { type: 'Lip gloss', country: 'USA', value: 22998 },
+      { type: 'Mascara', country: 'Africa', value: 18712 },
+      { type: 'Mascara', country: 'China', value: 10419 },
+      { type: 'Mascara', country: 'USA', value: 11261 }
+    ]
+  },
+  height: 600,
+  xField: ['type'],
+  yField: 'value',
+  seriesField: 'country',
+  legends: {
+    visible: true
+  },
+  line: {
+    style: {
+      curveType: 'linear'
+    }
+  },
+  point: {
+    state: {
+      dimension_hover: {
+        visible: true,
+        size: 12
+      }
+    }
+  },
+  crosshair: {
+    xField: {
+      line: {
+        type: 'line',
+        style: {
+          lineWidth: 1
+        }
+      }
+    }
+  },
+  stack: false
+};
diff --git a/packages/vchart-theme-demo-component/src/spec/bar.ts b/packages/vchart-theme-demo-component/src/spec/bar.ts
@@ -0,0 +1,41 @@
+export const barSpec = {
+  type: 'bar',
+  data: {
+    values: [
+      { type: 'Autocracies', year: '1930', value: 129 },
+      { type: 'Autocracies', year: '1940', value: 133 },
+      { type: 'Autocracies', year: '1950', value: 130 },
+      { type: 'Autocracies', year: '1960', value: 126 },
+      { type: 'Autocracies', year: '1970', value: 117 },
+      { type: 'Autocracies', year: '1980', value: 114 },
+      { type: 'Autocracies', year: '1990', value: 111 },
+      { type: 'Autocracies', year: '2000', value: 89 },
+      { type: 'Autocracies', year: '2010', value: 80 },
+      { type: 'Autocracies', year: '2018', value: 80 }
+    ]
+  },
+  height: 500,
+  xField: ['year', 'type'],
+  yField: 'value',
+  seriesField: 'type',
+  axes: [
+    {
+      orient: 'bottom',
+      visible: true,
+      domainLine: { visible: true },
+      tick: { visible: true }
+    },
+    {
+      orient: 'left',
+      visible: true,
+      domainLine: { visible: false },
+      tick: { visible: false }
+    }
+  ],
+  legends: {
+    visible: true
+  },
+  indicator: {
+    visible: true
+  }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { Frame as ChartHubThemePage } from './vchart-chart-hub-theme/index';
		export { ChartHubThemePage };