├── .DS_Store ├── .gitignore ├── LICENSE ├── README.md ├── demo ├── .gitignore ├── README.md ├── composables │ └── useDemoParams.ts ├── layouts │ └── default.vue ├── nuxt.config.ts ├── package-lock.json ├── package.json ├── pages │ ├── [chartType] │ │ └── [pluginName] │ │ │ └── [presetName].client.vue │ ├── demo0 │ │ └── index.client.vue │ ├── demo1 │ │ └── index.client.vue │ ├── demo2 │ │ └── index.client.vue │ ├── demo3 │ │ └── index.client.vue │ ├── index.vue │ ├── index │ │ └── index.vue │ ├── test │ │ └── index.client.vue │ ├── test1 │ │ └── index.client.vue │ ├── test2 │ │ └── index.client.vue │ ├── test3 │ │ └── index.client.vue │ ├── test4 │ │ └── index.client.vue │ ├── test5 │ │ └── index.client.vue │ ├── test6 │ │ └── index.client.vue │ ├── test7 │ │ └── index.client.vue │ └── test8 │ │ └── index.client.vue ├── public │ ├── .nojekyll │ ├── favicon.ico │ ├── favicon_temp.ico │ ├── nuxt.ico │ └── orbcharts_logo_temp.png ├── server │ └── tsconfig.json ├── tsconfig.json └── utils │ └── getDemoData.ts ├── index.html └── packages ├── README.md ├── orbcharts-core-types ├── LICENSE ├── package-lock.json ├── package.json ├── src │ ├── index.ts │ └── types │ │ ├── Axis.ts │ │ ├── Chart.ts │ │ ├── ChartParams.ts │ │ ├── Common.ts │ │ ├── ComputedData.ts │ │ ├── ComputedDataGrid.ts │ │ ├── ComputedDataMultiGrid.ts │ │ ├── ComputedDataMultiValue.ts │ │ ├── ComputedDataRelationship.ts │ │ ├── ComputedDataSeries.ts │ │ ├── ComputedDataTree.ts │ │ ├── ContextObserver.ts │ │ ├── ContextObserverGrid.ts │ │ ├── ContextObserverMultiGrid.ts │ │ ├── ContextObserverMultiValue.ts │ │ ├── ContextObserverRelationship.ts │ │ ├── ContextObserverSeries.ts │ │ ├── ContextObserverTree.ts │ │ ├── ContextSubject.ts │ │ ├── Data.ts │ │ ├── DataFormatter.ts │ │ ├── DataFormatterGrid.ts │ │ ├── DataFormatterMultiGrid.ts │ │ ├── DataFormatterMultiValue.ts │ │ ├── DataFormatterRelationship.ts │ │ ├── DataFormatterSeries.ts │ │ ├── DataFormatterTree.ts │ │ ├── DataGrid.ts │ │ ├── DataMultiGrid.ts │ │ ├── DataMultiValue.ts │ │ ├── DataRelationship.ts │ │ ├── DataSeries.ts │ │ ├── DataTree.ts │ │ ├── Event.ts │ │ ├── Layout.ts │ │ ├── Padding.ts │ │ ├── Plugin.ts │ │ ├── Preset.ts │ │ ├── TransformData.ts │ │ ├── Validator.ts │ │ └── index.ts ├── tsconfig.base.json ├── tsconfig.json └── vite.config.js ├── orbcharts-core ├── LICENSE ├── lib │ └── core-types.ts ├── package-lock.json ├── package.json ├── src │ ├── AbstractChart.ts │ ├── GridChart.ts │ ├── MultiGridChart.ts │ ├── MultiValueChart.ts │ ├── RelationshipChart.ts │ ├── SeriesChart.ts │ ├── TreeChart.ts │ ├── base │ │ ├── createBaseChart.ts │ │ ├── createBasePlugin.ts │ │ └── validators │ │ │ ├── chartOptionsValidator.ts │ │ │ ├── chartParamsValidator.ts │ │ │ ├── elementValidator.ts │ │ │ └── pluginsValidator.ts │ ├── defaults.ts │ ├── defineGridPlugin.ts │ ├── defineMultiGridPlugin.ts │ ├── defineMultiValuePlugin.ts │ ├── defineNoneDataPlugin.ts │ ├── defineRelationshipPlugin.ts │ ├── defineSeriesPlugin.ts │ ├── defineTreePlugin.ts │ ├── grid │ │ ├── computedDataFn.ts │ │ ├── contextObserverCallback.ts │ │ ├── dataFormatterValidator.ts │ │ ├── dataValidator.ts │ │ └── gridObservables.ts │ ├── index.ts │ ├── multiGrid │ │ ├── computedDataFn.ts │ │ ├── contextObserverCallback.ts │ │ ├── dataFormatterValidator.ts │ │ ├── dataValidator.ts │ │ └── multiGridObservables.ts │ ├── multiValue │ │ ├── computedDataFn.ts │ │ ├── contextObserverCallback.ts │ │ ├── dataFormatterValidator.ts │ │ ├── dataValidator.ts │ │ └── multiValueObservables.ts │ ├── relationship │ │ ├── computedDataFn.ts │ │ ├── contextObserverCallback.ts │ │ ├── dataFormatterValidator.ts │ │ ├── dataValidator.ts │ │ └── relationshipObservables.ts │ ├── series │ │ ├── computedDataFn.ts │ │ ├── contextObserverCallback.ts │ │ ├── dataFormatterValidator.ts │ │ ├── dataValidator.ts │ │ └── seriesObservables.ts │ ├── tree │ │ ├── computedDataFn.ts │ │ ├── contextObserverCallback.ts │ │ ├── dataFormatterValidator.ts │ │ ├── dataValidator.ts │ │ └── treeObservables.ts │ └── utils │ │ ├── commonUtils.ts │ │ ├── d3Scale.ts │ │ ├── errorMessage.ts │ │ ├── index.ts │ │ ├── observables.ts │ │ ├── orbchartsUtils.ts │ │ └── validator.ts ├── tsconfig.base.json ├── tsconfig.json ├── vite-env.d.ts └── vite.config.js ├── orbcharts-demo ├── LICENSE ├── lib │ ├── core-types.ts │ ├── plugins-basic-types.ts │ └── presets-basic.ts ├── package-lock.json ├── package.json ├── src │ ├── data │ │ ├── gridData1.ts │ │ ├── gridData2.ts │ │ ├── gridData3.ts │ │ ├── gridData4.ts │ │ ├── gridData5.ts │ │ ├── multiGridData0.ts │ │ ├── multiGridData1.ts │ │ ├── multiGridData2.ts │ │ ├── multiGridData3.ts │ │ ├── multiGridData4.ts │ │ ├── multiValue0.ts │ │ ├── multiValue1.ts │ │ ├── multiValueData_brand.ts │ │ ├── multiValueData_brand_short.ts │ │ ├── multiValueData_channel.ts │ │ ├── multiValueData_channel_short.ts │ │ ├── relationshipData1.ts │ │ ├── relationshipData3.ts │ │ ├── seriesData1.ts │ │ ├── seriesData2.ts │ │ ├── seriesData3.ts │ │ ├── seriesData4.ts │ │ ├── treeData0.ts │ │ └── treeData1.ts │ ├── demo.ts │ ├── index.ts │ ├── types.ts │ └── utils.ts ├── tsconfig.base.json ├── tsconfig.json └── vite.config.js ├── orbcharts-plugins-basic-types ├── LICENSE ├── lib │ └── core-types.ts ├── package-lock.json ├── package.json ├── src │ ├── index.ts │ └── types │ │ ├── BasePluginParams.ts │ │ ├── Common.ts │ │ ├── GridPluginParams.ts │ │ ├── MultiGridPluginParams.ts │ │ ├── MultiValuePluginParams.ts │ │ ├── NoneDataPluginParams.ts │ │ ├── PluginList.ts │ │ ├── RelationshipPluginParams.ts │ │ ├── SeriesPluginParams.ts │ │ ├── TreePluginParams.ts │ │ └── index.ts ├── tsconfig.base.json ├── tsconfig.json └── vite.config.js ├── orbcharts-plugins-basic ├── LICENSE ├── lib │ ├── core-types.ts │ ├── core.ts │ ├── gridObservables.ts │ └── plugins-basic-types.ts ├── package-lock.json ├── package.json ├── src │ ├── base │ │ ├── BaseBars.ts │ │ ├── BaseBarsTriangle.ts │ │ ├── BaseDots.ts │ │ ├── BaseGroupAxis.ts │ │ ├── BaseLegend.ts │ │ ├── BaseLineAreas.ts │ │ ├── BaseLines.ts │ │ ├── BaseOrdinalBubbles.ts │ │ ├── BaseRacingBars.ts │ │ ├── BaseRacingLabels.ts │ │ ├── BaseRacingValueLabels.ts │ │ ├── BaseStackedBars.ts │ │ ├── BaseTooltip.ts │ │ ├── BaseValueAxis.ts │ │ ├── BaseXAxis.ts │ │ ├── BaseXZoom.ts │ │ ├── BaseYAxis.ts │ │ └── types.ts │ ├── const.ts │ ├── grid │ │ ├── defaults.ts │ │ ├── gridObservables.ts │ │ ├── index.ts │ │ └── plugins │ │ │ ├── Bars.ts │ │ │ ├── BarsPN.ts │ │ │ ├── BarsTriangle.ts │ │ │ ├── Dots.ts │ │ │ ├── GridLegend.ts │ │ │ ├── GridTooltip.ts │ │ │ ├── GroupAux.ts │ │ │ ├── GroupAxis.ts │ │ │ ├── GroupZoom.ts │ │ │ ├── LineAreas.ts │ │ │ ├── Lines.ts │ │ │ ├── StackedBars.ts │ │ │ ├── StackedValueAxis.ts │ │ │ └── ValueAxis.ts │ ├── index.ts │ ├── multiGrid │ │ ├── defaults.ts │ │ ├── index.ts │ │ ├── multiGridObservables.ts │ │ └── plugins │ │ │ ├── MultiBars.ts │ │ │ ├── MultiBarsTriangle.ts │ │ │ ├── MultiDots.ts │ │ │ ├── MultiGridLegend.ts │ │ │ ├── MultiGridTooltip.ts │ │ │ ├── MultiGroupAxis.ts │ │ │ ├── MultiLineAreas.ts │ │ │ ├── MultiLines.ts │ │ │ ├── MultiStackedBars.ts │ │ │ ├── MultiStackedValueAxis.ts │ │ │ ├── MultiValueAxis.ts │ │ │ ├── OverlappingStackedValueAxes.ts │ │ │ └── OverlappingValueAxes.ts │ ├── multiValue │ │ ├── defaults.ts │ │ ├── index.ts │ │ ├── multiValueObservables.ts │ │ └── plugins │ │ │ ├── MultiValueLegend.ts │ │ │ ├── MultiValueTooltip.ts │ │ │ ├── OrdinalAux.ts │ │ │ ├── OrdinalAxis.ts │ │ │ ├── OrdinalBubbles.ts │ │ │ ├── OrdinalZoom.ts │ │ │ ├── RacingBars.ts │ │ │ ├── RacingCounterAxis.ts │ │ │ ├── RacingCounterTexts.ts │ │ │ ├── RacingValueAxis.ts │ │ │ ├── Scatter.ts │ │ │ ├── ScatterBubbles.ts │ │ │ ├── XAxis.ts │ │ │ ├── XYAux.ts │ │ │ ├── XYAxes.ts │ │ │ ├── XYAxes_legacy.ts │ │ │ └── XZoom.ts │ ├── noneData │ │ ├── defaults.ts │ │ ├── index.ts │ │ └── plugins │ │ │ ├── Container.ts │ │ │ └── Tooltip.ts │ ├── relationship │ │ ├── defaults.ts │ │ ├── index.ts │ │ ├── plugins │ │ │ ├── ForceDirected.ts │ │ │ ├── ForceDirectedBubbles.ts │ │ │ ├── RelationshipLegend.ts │ │ │ └── RelationshipTooltip.ts │ │ └── relationshipObservables.ts │ ├── series │ │ ├── defaults.ts │ │ ├── index.ts │ │ ├── plugins │ │ │ ├── Bubbles.ts │ │ │ ├── Pie.ts │ │ │ ├── PieEventTexts.ts │ │ │ ├── PieLabels.ts │ │ │ ├── Rose.ts │ │ │ ├── RoseLabels.ts │ │ │ ├── SeriesLegend.ts │ │ │ ├── SeriesTooltip.ts │ │ │ └── Waffle.ts │ │ ├── seriesObservables.ts │ │ └── seriesUtils.ts │ ├── tree │ │ ├── defaults.ts │ │ ├── index.ts │ │ └── plugins │ │ │ ├── TreeLegend.ts │ │ │ ├── TreeMap.ts │ │ │ └── TreeTooltip.ts │ └── utils │ │ ├── commonUtils.ts │ │ ├── d3Graphics.ts │ │ ├── d3Utils.ts │ │ ├── observables.ts │ │ └── orbchartsUtils.ts ├── tsconfig.base.json ├── tsconfig.json └── vite.config.js ├── orbcharts-presets-basic ├── LICENSE ├── lib │ ├── core-types.ts │ └── plugins-basic-types.ts ├── package-lock.json ├── package.json ├── src │ ├── grid │ │ ├── PRESET_BARS_HORIZONTAL_AND_ROUND.ts │ │ ├── PRESET_BARS_HORIZONTAL_AND_THIN.ts │ │ ├── PRESET_BARS_ROUND.ts │ │ ├── PRESET_BARS_THIN.ts │ │ ├── PRESET_GRID_BASIC.ts │ │ ├── PRESET_GRID_HORIZONTAL.ts │ │ ├── PRESET_GRID_PN_SCALE.ts │ │ ├── PRESET_GRID_PN_SCALE_SIMPLE.ts │ │ ├── PRESET_GRID_ROTATE_AXIS_LABEL.ts │ │ ├── PRESET_GRID_SEPARATE_SERIES.ts │ │ ├── PRESET_GRID_SIMPLE.ts │ │ ├── PRESET_LINES_BASIC.ts │ │ ├── PRESET_LINES_CURVE.ts │ │ ├── PRESET_LINES_HIGHLIGHT_GROUP_DOTS.ts │ │ ├── PRESET_LINES_HORIZONTAL.ts │ │ ├── PRESET_LINES_LOOSE_TICKS.ts │ │ ├── PRESET_LINES_ROTATE_AXIS_LABEL.ts │ │ ├── PRESET_LINES_SIMPLE.ts │ │ ├── PRESET_LINES_WITH_SOLID_DOTS.ts │ │ ├── PRESET_LINE_AREAS_BASIC.ts │ │ ├── PRESET_LINE_AREAS_CURVE.ts │ │ ├── PRESET_LINE_AREAS_HIGHLIGHT_GROUP_DOTS.ts │ │ ├── PRESET_LINE_AREAS_HORIZONTAL.ts │ │ ├── PRESET_LINE_AREAS_LOOSE_TICKS.ts │ │ ├── PRESET_LINE_AREAS_ROTATE_AXIS_LABEL.ts │ │ ├── PRESET_LINE_AREAS_SEPARATE_SERIES.ts │ │ ├── PRESET_LINE_AREAS_SIMPLE.ts │ │ └── index.ts │ ├── index.ts │ ├── multiGrid │ │ ├── PRESET_MULTI_GRID_BASIC.ts │ │ ├── PRESET_MULTI_GRID_DIVERGING.ts │ │ ├── PRESET_MULTI_GRID_DIVERGING_SIMPLE.ts │ │ ├── PRESET_MULTI_GRID_ROUND_STYLE.ts │ │ ├── PRESET_MULTI_GRID_ROUND_STYLE_SIMPLE.ts │ │ ├── PRESET_MULTI_GRID_SEPARATE_GRID.ts │ │ ├── PRESET_MULTI_GRID_SEPARATE_GRID_SIMPLE.ts │ │ ├── PRESET_MULTI_GRID_SIMPLE.ts │ │ ├── PRESET_MULTI_LINES_SEPARATE_GRID.ts │ │ ├── PRESET_MULTI_LINES_SEPARATE_GRID_SIMPLE.ts │ │ ├── PRESET_MULTI_LINE_AREAS_SEPARATE_GRID.ts │ │ ├── PRESET_MULTI_LINE_AREAS_SEPARATE_GRID_SIMPLE.ts │ │ └── index.ts │ ├── multiValue │ │ ├── PRESET_MULTI_VALUE_BASIC.ts │ │ ├── PRESET_MULTI_VALUE_SEPARATE_CATEGORY.ts │ │ ├── PRESET_MULTI_VALUE_SIMPLE.ts │ │ ├── PRESET_ORDINAL_BUBBLES_ALL_ITEMS.ts │ │ ├── PRESET_ORDINAL_BUBBLES_BASIC.ts │ │ ├── PRESET_ORDINAL_BUBBLES_LINEAR_OPACITY.ts │ │ ├── PRESET_ORDINAL_BUBBLES_SCALING_BY_RADIUS.ts │ │ ├── PRESET_ORDINAL_BUBBLES_SEPARATE_CATEGORY.ts │ │ ├── PRESET_ORDINAL_BUBBLES_SIMPLE.ts │ │ ├── PRESET_RACING_BARS_ALL_ITEMS.ts │ │ ├── PRESET_RACING_BARS_BASIC.ts │ │ ├── PRESET_RACING_BARS_FAST.ts │ │ ├── PRESET_RACING_BARS_FASTER.ts │ │ ├── PRESET_RACING_BARS_LOOP.ts │ │ ├── PRESET_RACING_BARS_OUTSIDE_LABELS.ts │ │ ├── PRESET_RACING_BARS_SEPARATE_CATEGORY.ts │ │ ├── PRESET_RACING_BARS_SIMPLE.ts │ │ ├── PRESET_RACING_BARS_STOP.ts │ │ ├── PRESET_SCATTER_BASIC.ts │ │ ├── PRESET_SCATTER_BUBBLES_BASIC.ts │ │ ├── PRESET_SCATTER_BUBBLES_LINEAR_OPACITY.ts │ │ ├── PRESET_SCATTER_BUBBLES_SCALING_BY_RADIUS.ts │ │ ├── PRESET_SCATTER_BUBBLES_SEPARATE_CATEGORY.ts │ │ ├── PRESET_SCATTER_BUBBLES_SIMPLE.ts │ │ ├── PRESET_SCATTER_SEPARATE_CATEGORY.ts │ │ ├── PRESET_SCATTER_SIMPLE.ts │ │ └── index.ts │ ├── relationship │ │ ├── PRESET_FORCE_DIRECTED_BASIC.ts │ │ ├── PRESET_FORCE_DIRECTED_BUBBLES_BASIC.ts │ │ ├── PRESET_FORCE_DIRECTED_BUBBLES_FIX_ARROW_WIDTH.ts │ │ ├── PRESET_FORCE_DIRECTED_BUBBLES_NONE_ARROW.ts │ │ ├── PRESET_FORCE_DIRECTED_BUBBLES_NONE_ZOOM.ts │ │ ├── PRESET_FORCE_DIRECTED_BUBBLES_SIMPLE.ts │ │ ├── PRESET_FORCE_DIRECTED_FIX_FONT_SIZE.ts │ │ ├── PRESET_FORCE_DIRECTED_NONE_ARROW.ts │ │ ├── PRESET_FORCE_DIRECTED_NONE_ZOOM.ts │ │ ├── PRESET_FORCE_DIRECTED_SIMPLE.ts │ │ └── index.ts │ ├── series │ │ ├── PRESET_BUBBLES_BASIC.ts │ │ ├── PRESET_BUBBLES_SCALING_BY_RADIUS.ts │ │ ├── PRESET_BUBBLES_SEPARATE_ALL.ts │ │ ├── PRESET_BUBBLES_SEPARATE_LABEL.ts │ │ ├── PRESET_BUBBLES_SEPARATE_SERIES.ts │ │ ├── PRESET_BUBBLES_SIMPLE.ts │ │ ├── PRESET_BUBBLES_SUM_SERIES.ts │ │ ├── PRESET_PIE_BASIC.ts │ │ ├── PRESET_PIE_DONUT.ts │ │ ├── PRESET_PIE_HALF_DONUT.ts │ │ ├── PRESET_PIE_SEPARATE_LABEL.ts │ │ ├── PRESET_PIE_SEPARATE_SERIES.ts │ │ ├── PRESET_PIE_SIMPLE.ts │ │ ├── PRESET_PIE_SUM_SERIES.ts │ │ ├── PRESET_PIE_WITH_INNER_LABELS.ts │ │ ├── PRESET_ROSE_BASIC.ts │ │ ├── PRESET_ROSE_SCALING_BY_RADIUS.ts │ │ ├── PRESET_ROSE_SEPARATE_ALL.ts │ │ ├── PRESET_ROSE_SEPARATE_LABEL.ts │ │ ├── PRESET_ROSE_SEPARATE_SERIES.ts │ │ ├── PRESET_ROSE_SEPARATE_SERIES_AND_SUM_SERIES.ts │ │ ├── PRESET_ROSE_SIMPLE.ts │ │ ├── PRESET_ROSE_SUM_SERIES.ts │ │ ├── PRESET_SERIES_BASIC.ts │ │ ├── PRESET_SERIES_SEPARATE_SERIES.ts │ │ ├── PRESET_SERIES_SEPARATE_SERIES_AND_SUM_SERIES.ts │ │ ├── PRESET_SERIES_SUM_SERIES.ts │ │ └── index.ts │ ├── tree │ │ ├── PRESET_TREE_MAP_BASIC.ts │ │ ├── PRESET_TREE_MAP_SIMPLE.ts │ │ └── index.ts │ └── types.ts ├── tsconfig.base.json ├── tsconfig.json └── vite.config.js ├── orbcharts-test ├── LICENSE ├── package-lock.json ├── package.json ├── src │ └── index.ts ├── tsconfig.base.json ├── tsconfig.json └── vite.config.js └── orbcharts ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src └── index.ts ├── tsconfig.base.json ├── tsconfig.json └── vite.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BPbase/orbcharts/4f35f399320084fd1c28d040ebe882809d4b29e3/.DS_Store -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # npm 11 | npm install 12 | 13 | # pnpm 14 | pnpm install 15 | 16 | # yarn 17 | yarn install 18 | 19 | # bun 20 | bun install 21 | ``` 22 | 23 | ## Development Server 24 | 25 | Start the development server on `http://localhost:3000`: 26 | 27 | ```bash 28 | # npm 29 | npm run dev 30 | 31 | # pnpm 32 | pnpm run dev 33 | 34 | # yarn 35 | yarn dev 36 | 37 | # bun 38 | bun run dev 39 | ``` 40 | 41 | ## Production 42 | 43 | Build the application for production: 44 | 45 | ```bash 46 | # npm 47 | npm run build 48 | 49 | # pnpm 50 | pnpm run build 51 | 52 | # yarn 53 | yarn build 54 | 55 | # bun 56 | bun run build 57 | ``` 58 | 59 | Locally preview production build: 60 | 61 | ```bash 62 | # npm 63 | npm run preview 64 | 65 | # pnpm 66 | pnpm run preview 67 | 68 | # yarn 69 | yarn preview 70 | 71 | # bun 72 | bun run preview 73 | ``` 74 | 75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 76 | -------------------------------------------------------------------------------- /demo/composables/useDemoParams.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default () => { 4 | 5 | } -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare", 11 | "deploy": "gh-pages --dotfiles -d .output/public" 12 | }, 13 | "dependencies": { 14 | "nuxt": "^3.11.2", 15 | "orbcharts": "^3.0.9", 16 | "rxjs": "npm:@esm-bundle/rxjs@^7.8.1", 17 | "vue": "^3.4.27", 18 | "vue-router": "^4.3.2" 19 | }, 20 | "devDependencies": { 21 | "gh-pages": "^6.1.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /demo/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | 22 | -------------------------------------------------------------------------------- /demo/public/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BPbase/orbcharts/4f35f399320084fd1c28d040ebe882809d4b29e3/demo/public/.nojekyll -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BPbase/orbcharts/4f35f399320084fd1c28d040ebe882809d4b29e3/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/public/favicon_temp.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BPbase/orbcharts/4f35f399320084fd1c28d040ebe882809d4b29e3/demo/public/favicon_temp.ico -------------------------------------------------------------------------------- /demo/public/nuxt.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BPbase/orbcharts/4f35f399320084fd1c28d040ebe882809d4b29e3/demo/public/nuxt.ico -------------------------------------------------------------------------------- /demo/public/orbcharts_logo_temp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BPbase/orbcharts/4f35f399320084fd1c28d040ebe882809d4b29e3/demo/public/orbcharts_logo_temp.png -------------------------------------------------------------------------------- /demo/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /demo/utils/getDemoData.ts: -------------------------------------------------------------------------------- 1 | import * as core from '../../packages/orbcharts-core/src' 2 | import * as pluginsBasic from '../../packages/orbcharts-plugins-basic/src' 3 | import * as presetsBasic from '../../packages/orbcharts-presets-basic/src' 4 | import type { DemoItem, DemoData } from '../../packages/orbcharts-demo/src/types' 5 | import { DEMO_LIST } from '../../packages/orbcharts-demo/src' 6 | 7 | export async function getDemoData ({ chartType, pluginNames, presetName }: { 8 | chartType: T 9 | pluginNames: (keyof typeof pluginsBasic)[] 10 | presetName: keyof typeof presetsBasic 11 | }): Promise | null> { 12 | const chartTypeItem = DEMO_LIST.find((item) => item.chartType === chartType) 13 | const mainPluginsItem = chartTypeItem?.list.find((item) => item.mainPluginNames.join(',') === pluginNames.join(',')) 14 | const demoItem: DemoItem | null = mainPluginsItem?.list.find((item) => item.presetName === presetName) ?? null 15 | if (!demoItem) { 16 | return null 17 | } 18 | 19 | // plugins 20 | const plugins: core.PluginEntity[] = demoItem.allPluginNames.map((plugin) => { 21 | const Plugin = pluginsBasic[plugin] as core.PluginConstructor 22 | return new Plugin() 23 | }) 24 | // data 25 | const { default: data } = await demoItem.getData() 26 | // preset 27 | const preset = presetsBasic[presetName] as any 28 | 29 | return { preset, plugins, data } 30 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 27 | 28 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orbcharts/core-types", 3 | "version": "3.0.4", 4 | "description": "Types of core codes for OrbCharts", 5 | "author": "Blue Planet Inc.", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "d3", 9 | "rxjs", 10 | "typescript", 11 | "svg", 12 | "visualization", 13 | "infographic", 14 | "graph", 15 | "chart" 16 | ], 17 | "private": false, 18 | "publishConfig": { 19 | "access": "public", 20 | "registry": "https://registry.npmjs.org/" 21 | }, 22 | "files": [ 23 | "*" 24 | ], 25 | "main": "./dist/orbcharts-core-types.umd.js", 26 | "module": "./dist/orbcharts-core-types.es.js", 27 | "types": "./dist/src/index.d.ts", 28 | "unpkg": "./dist/orbcharts-core-types.umd.js", 29 | "jsdelivr": "./dist/orbcharts-core-types.umd.js", 30 | "scripts": { 31 | "test": "echo \"Error: no test specified\" && exit 1", 32 | "build": "vite build --mode production" 33 | }, 34 | "devDependencies": { 35 | "@types/d3": "^7.4.0", 36 | "ts-loader": "^9.4.2", 37 | "typescript": "^5.0.4", 38 | "vite": "^5.3.5", 39 | "vite-plugin-dts": "^3.7.3" 40 | }, 41 | "dependencies": { 42 | "d3": "^7.8.5", 43 | "rxjs": "^7.8.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './types' 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/Axis.ts: -------------------------------------------------------------------------------- 1 | export type AxisPosition = 'top' | 'bottom' | 'left' | 'right' -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ChartParams.ts: -------------------------------------------------------------------------------- 1 | import type { Padding } from './Padding' 2 | 3 | export interface ChartParams { 4 | padding: Padding, 5 | highlightTarget: HighlightTarget 6 | highlightDefault: string | null 7 | colorScheme: 'dark' | 'light' 8 | colors: { 9 | light: ColorScheme 10 | dark: ColorScheme 11 | } 12 | styles: Styles 13 | transitionDuration: number 14 | transitionEase: string 15 | // [key: string]: any 16 | } 17 | 18 | export type ChartParamsPartial = Partial, 20 | colors: Partial<{ 21 | light: Partial 22 | dark: Partial 23 | }> 24 | styles: Partial 25 | }> 26 | 27 | export type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' 28 | 29 | export interface Styles { 30 | textSize: string | number 31 | unhighlightedOpacity: number 32 | } 33 | 34 | export interface ColorScheme { 35 | label: string[] 36 | primary: string 37 | secondary: string 38 | // white: string 39 | labelContrast: [string, string] 40 | background: string 41 | } 42 | 43 | export type ColorType = 'none' | keyof ColorScheme 44 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/Common.ts: -------------------------------------------------------------------------------- 1 | export type DeepPartial = Partial<{ [P in keyof T]: DeepPartial }> 2 | 3 | export interface ContainerSize { 4 | width: number 5 | height: number 6 | } 7 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ComputedDataGrid.ts: -------------------------------------------------------------------------------- 1 | import { ComputedDatumBase, ComputedDatumBaseGrid, ComputedDatumBaseValue } from './ComputedData' 2 | 3 | export interface ComputedDatumGrid 4 | extends ComputedDatumBase, ComputedDatumBaseGrid, ComputedDatumBaseValue { 5 | // accSeriesIndex: number // 每一個grid累加的seriesIndex 6 | // gridIndex: number 7 | // groupIndex: number 8 | // groupLabel: string 9 | // axisX: number 10 | // axisY: number 11 | // axisYFromZero: number 12 | } 13 | 14 | export type ComputedDataGrid = ComputedDatumGrid[][] -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ComputedDataMultiGrid.ts: -------------------------------------------------------------------------------- 1 | import { ComputedDataGrid } from './ComputedDataGrid' 2 | 3 | export type ComputedDataMultiGrid = ComputedDataGrid[] -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ComputedDataMultiValue.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedDatumBase, ComputedDatumBaseCategory, ComputedDatumBaseMultiValue } from './ComputedData' 2 | 3 | export type ComputedDataMultiValue = ComputedDatumMultiValue[][] 4 | 5 | export interface ComputedDatumMultiValue extends ComputedDatumBase, ComputedDatumBaseCategory, ComputedDatumBaseMultiValue { 6 | // datumIndex: number 7 | xValueIndex: number 8 | yValueIndex: number 9 | value: (number | null)[] 10 | // _visibleValue: (number | null)[] // 有顯示出來的值（用於tooltip） 11 | } 12 | 13 | export interface ComputedDatumWithSumMultiValue extends ComputedDatumMultiValue { 14 | sum: number 15 | } 16 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ComputedDataRelationship.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedDatumBase, ComputedDatumBaseCategory, ComputedDatumBaseValue } from './ComputedData' 2 | 3 | export type ComputedDataRelationship = { 4 | nodes: ComputedNode[] 5 | edges: ComputedEdge[] 6 | } 7 | 8 | export interface ComputedNode extends ComputedDatumBase, ComputedDatumBaseCategory, ComputedDatumBaseValue { 9 | // startNodes: ComputedNode[] 10 | // startNodeIds: string[] 11 | // endNodes: ComputedNode[] 12 | // endNodeIds: string[] 13 | } 14 | 15 | export interface ComputedEdge extends ComputedDatumBase, ComputedDatumBaseCategory, ComputedDatumBaseValue { 16 | startNode: ComputedNode 17 | // startNodeId: string 18 | endNode: ComputedNode 19 | // endNodeId: string 20 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ComputedDataSeries.ts: -------------------------------------------------------------------------------- 1 | import { ComputedDatumBase, ComputedDatumBaseSeries, ComputedDatumBaseValue } from './ComputedData' 2 | 3 | export interface ComputedDatumSeries 4 | extends ComputedDatumBase, ComputedDatumBaseSeries, ComputedDatumBaseValue { 5 | 6 | } 7 | 8 | export type ComputedDataSeries = ComputedDatumSeries[][] -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ComputedDataTree.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedDatumBase, ComputedDatumBaseCategory, ComputedDatumBaseValue } from './ComputedData' 2 | 3 | // export type ComputedDataTree = ComputedDataTreeDatum[] 4 | 5 | // export interface ComputedDataTreeDatum extends ComputedDatum { 6 | // // id: string 7 | // children: ComputedDataTreeDatum[] 8 | // childrenIds: string[] 9 | // // ChildrenMap: Map 10 | // parent: ComputedDataTreeDatum 11 | // parentId: string 12 | // value?: number 13 | // } 14 | 15 | // 樹狀結構 16 | export interface ComputedDataTree extends ComputedDatumBase, ComputedDatumBaseCategory, ComputedDatumBaseValue { 17 | level: number 18 | seq: number 19 | children?: ComputedDataTree[] 20 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ContextObserverMultiGrid.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs' 2 | import type { ContextObserverBase } from './ContextObserver' 3 | import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid' 4 | import type { DataFormatterGrid } from './DataFormatterGrid' 5 | import type { ContextObserverGridDetail } from './ContextObserverGrid' 6 | import type { ContainerPositionScaled } from './ContextObserver' 7 | import type { ContainerSize } from './Common' 8 | 9 | export interface ContextObserverMultiGrid extends ContextObserverBase<'multiGrid', PluginParams> { 10 | textSizePx$: Observable 11 | containerSize$: Observable 12 | multiGridHighlight$: Observable 13 | // seriesLabels$: Observable 14 | multiGridContainerPosition$: Observable 15 | filteredMinMaxValue$: Observable<[number, number]> 16 | filteredStackedMinMaxValue$: Observable<[number, number]> 17 | // -- each grid -- 18 | multiGridEachDetail$: Observable 19 | } 20 | 21 | 22 | export interface ContextObserverMultiGridDetail extends ContextObserverGridDetail { 23 | computedData$: Observable 24 | dataFormatter$: Observable 25 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ContextObserverRelationship.ts: -------------------------------------------------------------------------------- 1 | import type { Observable } from 'rxjs' 2 | import type { ContextObserverBase } from './ContextObserver' 3 | import type { ComputedDataRelationship, ComputedNode, ComputedEdge } from './ComputedDataRelationship' 4 | 5 | export interface ContextObserverRelationship extends ContextObserverBase<'relationship', PluginParams> { 6 | textSizePx$: Observable 7 | relationshipHighlightNodes$: Observable 8 | relationshipHighlightEdges$: Observable 9 | categoryLabels$: Observable 10 | CategoryNodeMap$: Observable> 11 | CategoryEdgeMap$: Observable> 12 | NodeMap$: Observable> 13 | EdgeMap$: Observable> 14 | visibleComputedData$: Observable 15 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ContextObserverSeries.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs' 2 | import type { ContextObserverBase } from './ContextObserver' 3 | import type { ComputedDatumSeries } from './ComputedDataSeries' 4 | import type { ContainerPosition} from './ContextObserver' 5 | 6 | export interface ContextObserverSeries extends ContextObserverBase<'series', PluginParams> { 7 | textSizePx$: Observable 8 | separateSeries$: Observable 9 | separateLabel$: Observable 10 | sumSeries$: Observable 11 | // visibleComputedData$: Observable 12 | computedSortedData$: Observable 13 | visibleComputedSortedData$: Observable 14 | seriesHighlight$: Observable 15 | seriesLabels$: Observable 16 | SeriesDataMap$: Observable> 17 | seriesContainerPosition$: Observable 18 | DatumContainerPositionMap$: Observable> 19 | } 20 | 21 | // export interface SeriesContainerPosition { 22 | // slotIndex: number 23 | // rowIndex: number 24 | // columnIndex: number 25 | // // translate: [number, number] 26 | // startX: number 27 | // startY: number 28 | // centerX: number 29 | // centerY: number 30 | // width: number 31 | // height: number 32 | // } 33 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ContextObserverTree.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs' 2 | import type { ContextObserverBase } from './ContextObserver' 3 | import type { ComputedDataTree } from './ComputedDataTree' 4 | 5 | export interface ContextObserverTree extends ContextObserverBase<'tree', PluginParams> { 6 | textSizePx$: Observable 7 | treeHighlight$: Observable 8 | categoryLabels$: Observable 9 | CategoryDataMap$: Observable> 10 | visibleComputedData$: Observable 11 | } 12 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/ContextSubject.ts: -------------------------------------------------------------------------------- 1 | import { Observable, Subject, BehaviorSubject } from 'rxjs' 2 | import type { ChartType } from './Chart' 3 | import type { EventTypeMap } from './Event' 4 | import type { ChartParamsPartial } from './ChartParams' 5 | // import type { Data } from './Data' 6 | import type { DataFormatterPartialTypeMap } from './DataFormatter' 7 | import type { DataTypeMap } from './Data' 8 | import type { DataFormatterTypeMap } from './DataFormatter' 9 | import type { PluginEntity } from './Plugin' 10 | 11 | export interface ContextSubject { 12 | data$: Subject> 13 | dataFormatter$: Subject> 14 | plugins$: Subject[]> 15 | // pluginParams$: Subject<{[keys: string]: unknown}> 16 | chartParams$: Subject 17 | event$: Subject> 18 | } 19 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataFormatterMultiValue.ts: -------------------------------------------------------------------------------- 1 | // import { DataMultiValueDatum, DataMultiValue } from './DataMultiValue' 2 | import { 3 | DataFormatterBase, 4 | DataFormatterBasePartial, 5 | DataFormatterXYAxis, 6 | VisibleFilter, 7 | DataFormatterContainer 8 | } from './DataFormatter' 9 | 10 | export interface DataFormatterMultiValue extends DataFormatterBase<'multiValue'> { 11 | visibleFilter: VisibleFilter<'multiValue'> 12 | // labelFormat: (datum: unknown) => string 13 | categoryLabels: string[] 14 | valueLabels: string[] 15 | // multiValue: Array 16 | xAxis: DataFormatterXYAxis 17 | yAxis: DataFormatterXYAxis 18 | container: DataFormatterContainer 19 | separateCategory: boolean 20 | } 21 | 22 | export interface DataFormatterMultiValuePartial extends DataFormatterBasePartial<'multiValue'> { 23 | visibleFilter?: VisibleFilter<'multiValue'> 24 | categoryLabels?: string[] 25 | valueLabels?: string[] 26 | // multiValue?: Array> 27 | xAxis?: Partial 28 | yAxis?: Partial 29 | container?: Partial 30 | separateCategory?: boolean 31 | } 32 | 33 | // multiValue欄位 34 | export interface DataFormatterMultiValueMultiValue { 35 | // unitLabel: string 36 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataFormatterRelationship.ts: -------------------------------------------------------------------------------- 1 | import { Node, Edge, DataRelationship } from './DataRelationship' 2 | import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './DataFormatter' 3 | 4 | export interface DataFormatterRelationship extends DataFormatterBase<'relationship'> { 5 | visibleFilter: VisibleFilter<'relationship'> 6 | categoryLabels: string[] 7 | // node: DataFormatterRelationshipNode 8 | // edge: DataFormatterRelationshipEdge 9 | } 10 | 11 | export interface DataFormatterRelationshipPartial extends DataFormatterBasePartial<'relationship'> { 12 | visibleFilter?: VisibleFilter<'relationship'> 13 | categoryLabels?: string[] 14 | // node: Partial 15 | // edge: Partial 16 | } 17 | 18 | // export interface DataFormatterRelationshipNode { 19 | // labelFormat: (node: unknown) => string 20 | // descriptionFormat: (node: unknown) => string 21 | // } 22 | 23 | // export interface DataFormatterRelationshipEdge { 24 | // labelFormat: (edge: unknown, startNode: unknown, endNode: unknown) => string 25 | // descriptionFormat: (edge: unknown, startNode: unknown, endNode: unknown) => string 26 | // } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataFormatterSeries.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedDatumSeries } from './ComputedDataSeries' 2 | import type { DataFormatterBase, DataFormatterBasePartial, VisibleFilter, DataFormatterContainer } from './DataFormatter' 3 | 4 | export interface DataFormatterSeries extends DataFormatterBase<'series'> { 5 | visibleFilter: VisibleFilter<'series'> 6 | sort: ((a: ComputedDatumSeries, b: ComputedDatumSeries) => number) | null 7 | seriesLabels: string[] 8 | container: DataFormatterContainer 9 | separateSeries: boolean 10 | separateLabel: boolean 11 | sumSeries: boolean 12 | } 13 | 14 | export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'series'> { 15 | visibleFilter?: VisibleFilter<'series'> 16 | sort?: ((a: ComputedDatumSeries, b: ComputedDatumSeries) => number) | null 17 | seriesLabels?: string[] 18 | container?: Partial 19 | separateSeries?: boolean 20 | separateLabel?: boolean 21 | sumSeries?: boolean 22 | } 23 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataFormatterTree.ts: -------------------------------------------------------------------------------- 1 | import { DataTreeDatum, DataTree } from './DataTree' 2 | import { DataFormatterBase, VisibleFilter } from './DataFormatter' 3 | 4 | export interface DataFormatterTree 5 | extends DataFormatterBase<'tree'> { 6 | visibleFilter: VisibleFilter<'tree'> 7 | // labelFormat: (datum: unknown) => string 8 | // descriptionFormat: (datum: unknown) => string 9 | categoryLabels: string[] 10 | } 11 | 12 | export type DataFormatterTreePartial = Partial 13 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataGrid.ts: -------------------------------------------------------------------------------- 1 | import type { DatumBase, DatumValue } from './Data' 2 | 3 | // export type DataGrid = DataGridDatum[][] | DataGridValue[][] 4 | export type DataGrid = (DataGridDatum | DataGridValue)[][] 5 | 6 | export type DataGridValue = number | null 7 | 8 | export interface DataGridDatum extends DatumBase, DatumValue { 9 | } 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataMultiGrid.ts: -------------------------------------------------------------------------------- 1 | import type { DataGrid, DataGridDatum, DataGridValue } from './DataGrid' 2 | 3 | export type DataMultiGrid = DataGrid[] 4 | 5 | export interface DataMultiGridDatum extends DataGridDatum {} 6 | 7 | export type DataMultiGridValue = DataGridValue -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataMultiValue.ts: -------------------------------------------------------------------------------- 1 | import type { DatumBase, DatumMultiValue } from './Data' 2 | 3 | // export type DataMultiValue = DataMultiValueDatum[][] | DataMultiValueValue[][] 4 | export type DataMultiValue = (DataMultiValueDatum | DataMultiValueValue[])[] 5 | 6 | export type DataMultiValueValue = number | null 7 | 8 | export interface DataMultiValueDatum extends DatumBase, DatumMultiValue { 9 | categoryLabel?: string 10 | } 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataRelationship.ts: -------------------------------------------------------------------------------- 1 | import type { DatumBase } from './Data' 2 | 3 | export type DataRelationship = DataRelationshipObj | DataRelationshipList 4 | 5 | // 物件資料 6 | export interface DataRelationshipObj { 7 | nodes: Node[] 8 | edges: Edge[] 9 | } 10 | 11 | // 陣列資料 12 | export type DataRelationshipList = [ 13 | Node[], 14 | Edge[] 15 | ] 16 | 17 | 18 | export interface Node extends DatumBase { 19 | id: string 20 | value?: number 21 | categoryLabel?: string 22 | } 23 | 24 | export interface Edge extends DatumBase { 25 | start: string 26 | end: string 27 | value?: number 28 | categoryLabel?: string 29 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataSeries.ts: -------------------------------------------------------------------------------- 1 | import type { DatumBase, DatumValue } from './Data' 2 | 3 | // export type DataSeries = DataSeriesDatum[][] | DataSeriesDatum[] | DataSeriesValue[][] | DataSeriesValue[] 4 | export type DataSeries = (DataSeriesDatum | DataSeriesValue)[][] | (DataSeriesDatum | DataSeriesValue)[] 5 | 6 | export type DataSeriesValue = number | null 7 | 8 | export interface DataSeriesDatum extends DatumBase, DatumValue { 9 | } 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/DataTree.ts: -------------------------------------------------------------------------------- 1 | import type { DatumBase } from './Data' 2 | 3 | export type DataTree = DataTreeObj | DataTreeDatum[] 4 | 5 | // 樹狀結構 6 | export interface DataTreeObj extends DatumBase { 7 | id: string 8 | value?: number 9 | children?: DataTreeObj[] 10 | categoryLabel?: string 11 | } 12 | 13 | // 陣列資料 14 | export interface DataTreeDatum extends DatumBase { 15 | id: string 16 | value?: number 17 | parent?: string 18 | categoryLabel?: string 19 | } 20 | 21 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/Layout.ts: -------------------------------------------------------------------------------- 1 | import type { Padding } from './Padding' 2 | 3 | export interface Layout extends Padding { 4 | width: number 5 | height: number 6 | // top: number 7 | // right: number 8 | // bottom: number 9 | // left: number 10 | rootWidth: number 11 | rootHeight: number 12 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/Padding.ts: -------------------------------------------------------------------------------- 1 | export interface Padding { 2 | top: number 3 | right: number 4 | bottom: number 5 | left: number 6 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/Preset.ts: -------------------------------------------------------------------------------- 1 | import type { ChartType } from './Chart' 2 | import type { ChartParams, ChartParamsPartial } from './ChartParams' 3 | import type { DataFormatterTypeMap, DataFormatterPartialTypeMap } from './DataFormatter' 4 | 5 | export interface Preset { 6 | name: string 7 | description: string 8 | descriptionZh: string 9 | chartParams: ChartParams 10 | dataFormatter: DataFormatterTypeMap 11 | pluginParams: AllPluginParams 12 | } 13 | 14 | export interface PresetPartial { 15 | name?: string 16 | description?: string 17 | descriptionZh?: string 18 | chartParams?: ChartParamsPartial 19 | dataFormatter?: DataFormatterPartialTypeMap 20 | pluginParams?: AllPluginParams 21 | } 22 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/TransformData.ts: -------------------------------------------------------------------------------- 1 | export interface TransformData { 2 | translate: [number, number] 3 | scale: [number, number] 4 | rotate: number 5 | rotateX: number 6 | rotateY: number 7 | value: string 8 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/Validator.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | export type ToBeTypes = 'string' | 'number' | 'boolean' | 'object' | 'object[]' | 'string[]' | 'number[]' | 'Function' | 'null' | 'undefined' 6 | 7 | export type ToBeOption = 'ColorType' 8 | 9 | // 有使用定義好的型別則不需寫 validate 10 | export interface ValidatorRuleToBeTypes { 11 | toBeTypes: ToBeTypes[] 12 | } 13 | 14 | // 自訂規則 15 | export interface ValidatorRuleToBe { 16 | toBe: string 17 | test: (value: any) => boolean 18 | } 19 | 20 | // 選項資料型別 21 | export interface ValidatorRuleToBeOption { 22 | toBeOption: ToBeOption 23 | } 24 | 25 | export type ValidatorRule = {[key in keyof T]: ValidatorRuleToBeTypes | ValidatorRuleToBe | ValidatorRuleToBeOption} 26 | 27 | 28 | // export type ValidateColumns = (data: T, rules: ValidatorRule) => ValidatorResult 29 | 30 | function validateColumns (data: T, rules: Partial>): ValidatorResult { 31 | return { status: 'success', columnName: '', expectToBe: '' } 32 | } 33 | 34 | export interface ValidatorUtils { 35 | validateColumns: typeof validateColumns // 我發現要這樣寫才能夠透過 data 型別自動推斷出 T，不曉得有沒有更好的寫法 36 | } 37 | 38 | 39 | export interface ValidatorResult { 40 | status: 'success' | 'warning' | 'error' 41 | // message: string // warning or error message 42 | columnName: string, 43 | expectToBe: string, 44 | } 45 | 46 | -------------------------------------------------------------------------------- /packages/orbcharts-core-types/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Axis' 2 | export * from './Chart' 3 | export * from './ChartParams' 4 | export * from './Common' 5 | export * from './ComputedData' 6 | export * from './ComputedDataGrid' 7 | export * from './ComputedDataMultiGrid' 8 | export * from './ComputedDataMultiValue' 9 | export * from './ComputedDataRelationship' 10 | export * from './ComputedDataSeries' 11 | export * from './ComputedDataTree' 12 | export * from './ContextObserver' 13 | export * from './ContextObserverGrid' 14 | export * from './ContextObserverMultiGrid' 15 | export * from './ContextObserverMultiValue' 16 | export * from './ContextObserverRelationship' 17 | export * from './ContextObserverSeries' 18 | export * from './ContextObserverTree' 19 | export * from './ContextSubject' 20 | export * from './Data' 21 | export * from './DataFormatter' 22 | export * from './DataFormatterGrid' 23 | export * from './DataFormatterMultiGrid' 24 | export * from './DataFormatterMultiValue' 25 | export * from './DataFormatterRelationship' 26 | export * from './DataFormatterSeries' 27 | export * from './DataFormatterTree' 28 | export * from './DataGrid' 29 | export * from './DataMultiGrid' 30 | export * from './DataMultiValue' 31 | export * from './DataRelationship' 32 | export * from './DataSeries' 33 | export * from './DataTree' 34 | export * from './Event' 35 | export * from './Layout' 36 | export * from './Padding' 37 | export * from './Plugin' 38 | export * from './Preset' 39 | export * from './TransformData' 40 | export * from './Validator' -------------------------------------------------------------------------------- /packages/orbcharts-core-types/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports" : true, 12 | "esModuleInterop" : true 13 | } 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json" 3 | } -------------------------------------------------------------------------------- /packages/orbcharts-core-types/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import dts from 'vite-plugin-dts' 3 | 4 | export default defineConfig(({ command, mode }) => { 5 | return { 6 | plugins: [ 7 | dts({ 8 | insertTypesEntry: true 9 | }) 10 | ], 11 | compilerOptions: { 12 | composite: true 13 | }, 14 | build: { 15 | lib: { 16 | entry: "src/index.ts", 17 | name: 'orbcharts-core-types', 18 | formats: ["es", "umd"], 19 | fileName: format => `orbcharts-core-types.${format}.js` 20 | }, 21 | } 22 | } 23 | }) -------------------------------------------------------------------------------- /packages/orbcharts-core/lib/core-types.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/core-types' 4 | 5 | // test 6 | // export * from '../../orbcharts-core-types/src' 7 | 8 | -------------------------------------------------------------------------------- /packages/orbcharts-core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orbcharts/core", 3 | "version": "3.0.6", 4 | "description": "Core codes for OrbCharts", 5 | "author": "Blue Planet Inc.", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "d3", 9 | "rxjs", 10 | "typescript", 11 | "svg", 12 | "visualization", 13 | "infographic", 14 | "graph", 15 | "chart" 16 | ], 17 | "private": false, 18 | "publishConfig": { 19 | "access": "public", 20 | "registry": "https://registry.npmjs.org/" 21 | }, 22 | "files": [ 23 | "*" 24 | ], 25 | "main": "./dist/orbcharts-core.umd.js", 26 | "module": "./dist/orbcharts-core.es.js", 27 | "types": "./dist/src/index.d.ts", 28 | "unpkg": "./dist/orbcharts-core.umd.js", 29 | "jsdelivr": "./dist/orbcharts-core.umd.js", 30 | "scripts": { 31 | "test": "echo \"Error: no test specified\" && exit 1", 32 | "build": "vite build --mode production" 33 | }, 34 | "devDependencies": { 35 | "@types/d3": "^7.4.0", 36 | "ts-loader": "^9.4.2", 37 | "typescript": "^5.0.4", 38 | "vite": "^5.3.5", 39 | "vite-plugin-dts": "^3.7.3" 40 | }, 41 | "dependencies": { 42 | "@orbcharts/core-types": "^3.0.4", 43 | "d3": "^7.8.5", 44 | "rxjs": "^7.8.1" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/GridChart.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ChartEntity, 3 | ChartOptionsPartial } from '../lib/core-types' 4 | import { DEFAULT_DATA_FORMATTER_GRID } from './defaults' 5 | import { dataFormatterValidator } from './grid/dataFormatterValidator' 6 | import { computedDataFn } from './grid/computedDataFn' 7 | import { dataValidator } from './grid/dataValidator' 8 | import { contextObserverCallback } from './grid/contextObserverCallback' 9 | import { AbstractChart } from './AbstractChart' 10 | 11 | export class GridChart extends AbstractChart<'grid'> implements ChartEntity<'grid'> { 12 | constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'grid'>) { 13 | super( 14 | { 15 | defaultDataFormatter: DEFAULT_DATA_FORMATTER_GRID, 16 | dataFormatterValidator, 17 | computedDataFn, 18 | dataValidator, 19 | contextObserverCallback 20 | }, 21 | element, 22 | options 23 | ) 24 | } 25 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/MultiGridChart.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ChartEntity, 3 | ChartOptionsPartial } from '../lib/core-types' 4 | import { DEFAULT_DATA_FORMATTER_MULTI_GRID } from './defaults' 5 | import { dataFormatterValidator } from './multiGrid/dataFormatterValidator' 6 | import { computedDataFn } from './multiGrid/computedDataFn' 7 | import { dataValidator } from './multiGrid/dataValidator' 8 | import { contextObserverCallback } from './multiGrid/contextObserverCallback' 9 | import { AbstractChart } from './AbstractChart' 10 | 11 | export class MultiGridChart extends AbstractChart<'multiGrid'> implements ChartEntity<'multiGrid'> { 12 | constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'multiGrid'>) { 13 | super( 14 | { 15 | defaultDataFormatter: DEFAULT_DATA_FORMATTER_MULTI_GRID, 16 | dataFormatterValidator, 17 | computedDataFn, 18 | dataValidator, 19 | contextObserverCallback 20 | }, 21 | element, 22 | options 23 | ) 24 | } 25 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/MultiValueChart.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ChartEntity, 3 | ChartOptionsPartial } from '../lib/core-types' 4 | import { DEFAULT_DATA_FORMATTER_MULTI_VALUE } from './defaults' 5 | import { dataFormatterValidator } from './multiValue/dataFormatterValidator' 6 | import { computedDataFn } from './multiValue/computedDataFn' 7 | import { dataValidator } from './multiValue/dataValidator' 8 | import { contextObserverCallback } from './multiValue/contextObserverCallback' 9 | import { AbstractChart } from './AbstractChart' 10 | 11 | export class MultiValueChart extends AbstractChart<'multiValue'> implements ChartEntity<'multiValue'> { 12 | constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'multiValue'>) { 13 | super( 14 | { 15 | defaultDataFormatter: DEFAULT_DATA_FORMATTER_MULTI_VALUE, 16 | dataFormatterValidator, 17 | computedDataFn, 18 | dataValidator, 19 | contextObserverCallback 20 | }, 21 | element, 22 | options 23 | ) 24 | } 25 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/RelationshipChart.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ChartEntity, 3 | ChartOptionsPartial } from '../lib/core-types' 4 | import { DEFAULT_DATA_FORMATTER_RELATIONSHIP} from './defaults' 5 | import { dataFormatterValidator } from './relationship/dataFormatterValidator' 6 | import { computedDataFn } from './relationship/computedDataFn' 7 | import { dataValidator } from './relationship/dataValidator' 8 | import { contextObserverCallback } from './relationship/contextObserverCallback' 9 | import { AbstractChart } from './AbstractChart' 10 | 11 | export class RelationshipChart extends AbstractChart<'relationship'> implements ChartEntity<'relationship'> { 12 | constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'relationship'>) { 13 | super( 14 | { 15 | defaultDataFormatter: DEFAULT_DATA_FORMATTER_RELATIONSHIP, 16 | dataFormatterValidator, 17 | computedDataFn, 18 | dataValidator, 19 | contextObserverCallback 20 | }, 21 | element, 22 | options 23 | ) 24 | } 25 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/SeriesChart.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ChartEntity, 3 | ChartOptionsPartial } from '../lib/core-types' 4 | import { DEFAULT_DATA_FORMATTER_SERIES } from './defaults' 5 | import { dataFormatterValidator } from './series/dataFormatterValidator' 6 | import { computedDataFn } from './series/computedDataFn' 7 | import { dataValidator } from './series/dataValidator' 8 | import { contextObserverCallback } from './series/contextObserverCallback' 9 | import { AbstractChart } from './AbstractChart' 10 | 11 | export class SeriesChart extends AbstractChart<'series'> implements ChartEntity<'series'> { 12 | constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'series'>) { 13 | super( 14 | { 15 | defaultDataFormatter: DEFAULT_DATA_FORMATTER_SERIES, 16 | dataFormatterValidator, 17 | computedDataFn, 18 | dataValidator, 19 | contextObserverCallback 20 | }, 21 | element, 22 | options 23 | ) 24 | } 25 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/TreeChart.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ChartEntity, 3 | ChartOptionsPartial } from '../lib/core-types' 4 | import { DEFAULT_DATA_FORMATTER_TREE } from './defaults' 5 | import { dataFormatterValidator } from './tree/dataFormatterValidator' 6 | import { computedDataFn } from './tree/computedDataFn' 7 | import { dataValidator } from './tree/dataValidator' 8 | import { contextObserverCallback } from './tree/contextObserverCallback' 9 | import { AbstractChart } from './AbstractChart' 10 | 11 | export class TreeChart extends AbstractChart<'tree'> implements ChartEntity<'tree'> { 12 | constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'tree'>) { 13 | super( 14 | { 15 | defaultDataFormatter: DEFAULT_DATA_FORMATTER_TREE, 16 | dataFormatterValidator, 17 | computedDataFn, 18 | dataValidator, 19 | contextObserverCallback 20 | }, 21 | element, 22 | options 23 | ) 24 | } 25 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/base/validators/chartOptionsValidator.ts: -------------------------------------------------------------------------------- 1 | import type { ChartOptionsPartial, ChartType, ValidatorResult } from '../../../lib/core-types' 2 | import { validateColumns } from '../../utils/validator' 3 | 4 | export function chartOptionsValidator (chartOptionsPartial: ChartOptionsPartial): ValidatorResult { 5 | if (!chartOptionsPartial) { 6 | // chartOptions 可為空值 7 | return { status: 'success', columnName: '', expectToBe: '' } 8 | } 9 | const result = validateColumns(chartOptionsPartial, { 10 | width: { 11 | toBe: '"auto" | number', 12 | test: (value: any) => value === 'auto' || typeof value === 'number' 13 | }, 14 | height: { 15 | toBe: '"auto" | number', 16 | test: (value: any) => value === 'auto' || typeof value === 'number' 17 | }, 18 | preset: { 19 | toBeTypes: ['object'] 20 | } 21 | }) 22 | 23 | return result 24 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/base/validators/elementValidator.ts: -------------------------------------------------------------------------------- 1 | import type { ValidatorResult } from '../../../lib/core-types' 2 | import { validateColumns } from '../../utils/validator' 3 | import { isDom } from '../../utils/commonUtils' 4 | 5 | export function elementValidator (element: HTMLElement | Element): ValidatorResult { 6 | const result = validateColumns({ element }, { 7 | element: { 8 | toBe: 'Dom', 9 | test: (value: any) => isDom(value) 10 | }, 11 | }) 12 | 13 | return result 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/base/validators/pluginsValidator.ts: -------------------------------------------------------------------------------- 1 | import type { ChartType, PluginEntity, ValidatorResult } from '../../../lib/core-types' 2 | import { validateColumns } from '../../utils/validator' 3 | 4 | export function pluginsValidator (chartType: ChartType, pluginEntities: PluginEntity[]): ValidatorResult { 5 | const result = validateColumns({ pluginEntities }, { 6 | pluginEntities: { 7 | toBe: `PluginEntity<'${chartType}'>[]`, 8 | test: (value: PluginEntity[]) => { 9 | return Array.isArray(value) && value.every((v) => v.chartType === chartType || v.chartType === 'noneData') 10 | } 11 | } 12 | }) 13 | 14 | return result 15 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/defineGridPlugin.ts: -------------------------------------------------------------------------------- 1 | import { createBasePlugin } from './base/createBasePlugin' 2 | 3 | export const defineGridPlugin = createBasePlugin('grid') 4 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/defineMultiGridPlugin.ts: -------------------------------------------------------------------------------- 1 | import { createBasePlugin } from './base/createBasePlugin' 2 | 3 | export const defineMultiGridPlugin = createBasePlugin('multiGrid') 4 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/defineMultiValuePlugin.ts: -------------------------------------------------------------------------------- 1 | import { createBasePlugin } from './base/createBasePlugin' 2 | 3 | export const defineMultiValuePlugin = createBasePlugin('multiValue') 4 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/defineNoneDataPlugin.ts: -------------------------------------------------------------------------------- 1 | import { createBasePlugin } from './base/createBasePlugin' 2 | 3 | // chartType型別使用 'any' 是為了讓 plugin entity 能夠被加入到所有類別的 chart.plugins$ 中 4 | export const defineNoneDataPlugin = createBasePlugin('noneData') 5 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/defineRelationshipPlugin.ts: -------------------------------------------------------------------------------- 1 | import { createBasePlugin } from './base/createBasePlugin' 2 | 3 | export const defineRelationshipPlugin = createBasePlugin('relationship') 4 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/defineSeriesPlugin.ts: -------------------------------------------------------------------------------- 1 | import { createBasePlugin } from './base/createBasePlugin' 2 | 3 | export const defineSeriesPlugin = createBasePlugin('series') 4 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/defineTreePlugin.ts: -------------------------------------------------------------------------------- 1 | import { createBasePlugin } from './base/createBasePlugin' 2 | 3 | export const defineTreePlugin = createBasePlugin('tree') 4 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/grid/dataValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataValidator, DataTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | 4 | export const dataValidator: DataValidator<'grid'> = (data: DataTypeMap<'grid'>) => { 5 | const result = validateColumns({ data }, { 6 | data: { 7 | toBe: '(DataGridDatum | DataGridValue)[][]', 8 | // 畢免資料量過大檢查不完，不深度檢查 9 | test: (value) => Array.isArray(value) 10 | } 11 | }) 12 | return result 13 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { SeriesChart } from './SeriesChart' 3 | export { GridChart } from './GridChart' 4 | export { MultiGridChart } from './MultiGridChart' 5 | export { MultiValueChart } from './MultiValueChart' 6 | export { RelationshipChart } from './RelationshipChart' 7 | export { TreeChart } from './TreeChart' 8 | 9 | export { defineSeriesPlugin } from './defineSeriesPlugin' 10 | export { defineGridPlugin } from './defineGridPlugin' 11 | export { defineMultiGridPlugin } from './defineMultiGridPlugin' 12 | export { defineMultiValuePlugin } from './defineMultiValuePlugin' 13 | export { defineNoneDataPlugin } from './defineNoneDataPlugin' 14 | export { defineRelationshipPlugin } from './defineRelationshipPlugin' 15 | export { defineTreePlugin } from './defineTreePlugin' 16 | 17 | export * from './utils' 18 | export * from './defaults' 19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/orbcharts-core/src/multiGrid/dataValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataValidator, DataTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | 4 | export const dataValidator: DataValidator<'multiGrid'> = (data: DataTypeMap<'multiGrid'>) => { 5 | const result = validateColumns({ data }, { 6 | data: { 7 | toBe: 'DataGrid[]', 8 | // 畢免資料量過大檢查不完，不深度檢查 9 | test: (value) => Array.isArray(value) 10 | } 11 | }) 12 | return result 13 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/multiValue/dataValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataValidator, DataTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | 4 | export const dataValidator: DataValidator<'multiValue'> = (data: DataTypeMap<'multiValue'>) => { 5 | const result = validateColumns({ data }, { 6 | data: { 7 | toBe: '(DataMultiValueDatum | DataMultiValueValue[])[]', 8 | // 畢免資料量過大檢查不完，不深度檢查 9 | test: (value) => Array.isArray(value) 10 | } 11 | }) 12 | return result 13 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/relationship/dataFormatterValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | 4 | export const dataFormatterValidator: DataFormatterValidator<'relationship'> = (dataFormatter: DataFormatterTypeMap<'relationship'>) => { 5 | const result = validateColumns(dataFormatter, { 6 | visibleFilter: { 7 | toBeTypes: ['Function'] 8 | }, 9 | categoryLabels: { 10 | toBeTypes: ['string[]'] 11 | } 12 | }) 13 | return result 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/relationship/dataValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataValidator, DataTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | import { isPlainObject } from '../utils' 4 | 5 | export const dataValidator: DataValidator<'relationship'> = (data: DataTypeMap<'relationship'>) => { 6 | const result = validateColumns({ data }, { 7 | data: { 8 | toBe: 'DataRelationshipObj | DataRelationshipList', 9 | // 畢免資料量過大檢查不完，不深度檢查 10 | test: (value) => isPlainObject(value) || Array.isArray(value) 11 | } 12 | }) 13 | return result 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/series/dataFormatterValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | 4 | export const dataFormatterValidator: DataFormatterValidator<'series'> = (dataFormatter: DataFormatterTypeMap<'series'>) => { 5 | const result = validateColumns(dataFormatter, { 6 | visibleFilter: { 7 | toBeTypes: ['Function'] 8 | }, 9 | sort: { 10 | toBeTypes: ['Function', 'null'] 11 | }, 12 | seriesLabels: { 13 | toBeTypes: ['string[]'] 14 | }, 15 | container: { 16 | toBeTypes: ['object'] 17 | }, 18 | separateSeries: { 19 | toBeTypes: ['boolean'] 20 | }, 21 | sumSeries: { 22 | toBeTypes: ['boolean'] 23 | } 24 | }) 25 | if (dataFormatter.container) { 26 | const containerResult = validateColumns(dataFormatter.container, { 27 | columnAmount: { 28 | toBeTypes: ['number'] 29 | }, 30 | rowAmount: { 31 | toBeTypes: ['number'] 32 | }, 33 | columnGap: { 34 | toBe: '"auto" | number', 35 | test: (value: any) => value === 'auto' || typeof value === 'number' 36 | }, 37 | rowGap: { 38 | toBe: '"auto" | number', 39 | test: (value: any) => value === 'auto' || typeof value === 'number' 40 | }, 41 | }) 42 | if (containerResult.status === 'error') { 43 | return containerResult 44 | } 45 | } 46 | return result 47 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/series/dataValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataValidator, DataTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | 4 | export const dataValidator: DataValidator<'series'> = (data: DataTypeMap<'series'>) => { 5 | const result = validateColumns({ data }, { 6 | data: { 7 | toBe: '(DataSeriesDatum | DataSeriesValue)[][] | (DataSeriesDatum | DataSeriesValue)[]', 8 | // 畢免資料量過大檢查不完，不深度檢查 9 | test: (value) => Array.isArray(value) 10 | } 11 | }) 12 | return result 13 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/tree/dataFormatterValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | 4 | export const dataFormatterValidator: DataFormatterValidator<'tree'> = (dataFormatter: DataFormatterTypeMap<'tree'>) => { 5 | const result = validateColumns(dataFormatter, { 6 | visibleFilter: { 7 | toBeTypes: ['Function'] 8 | }, 9 | categoryLabels: { 10 | toBeTypes: ['string[]'] 11 | } 12 | }) 13 | return result 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/tree/dataValidator.ts: -------------------------------------------------------------------------------- 1 | import type { DataValidator, DataTypeMap } from '../../lib/core-types' 2 | import { validateColumns } from '../utils/validator' 3 | import { isPlainObject } from '../utils' 4 | 5 | export const dataValidator: DataValidator<'tree'> = (data: DataTypeMap<'tree'>) => { 6 | const result = validateColumns({ data }, { 7 | data: { 8 | toBe: 'DataTreeObj | DataTreeDatum[]', 9 | // 畢免資料量過大檢查不完，不深度檢查 10 | test: (value) => (isPlainObject(value) && value.id !== undefined) || Array.isArray(value) 11 | } 12 | }) 13 | return result 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/utils/errorMessage.ts: -------------------------------------------------------------------------------- 1 | // message的prefix - error: 有中斷，warning: 無中斷 2 | export function createMessagePrefix (status: 'warning' | 'error'): string { 3 | return `[OrbCharts ${status}]:` 4 | } 5 | 6 | // throw到最外層的錯誤訊息 7 | export function createOrbChartsErrorMessage (e: Error): string { 8 | return `${createMessagePrefix('error')} ${e.message}` 9 | } 10 | 11 | 12 | // 未預期的錯誤 13 | export function createUnexpectedErrorMessage ({ from, systemMessage }: { 14 | from: string // 15 | systemMessage: string // catch 給的的原生錯誤訊息 16 | }): string { 17 | return `unexpected error from '${from}': 18 | ${systemMessage}` 19 | } 20 | 21 | // validator 的 error 訊息 22 | export function createValidatorErrorMessage ({ columnName, expectToBe, from }: { 23 | columnName: string // e.g. 'seriesLabels' 24 | expectToBe: string // e.g. 'string[]' 25 | from: string // e.g. Chart.chartParams$, Pie.params$ 26 | }): string { 27 | return `Invalid value: '${columnName}' must be '${expectToBe}' 28 | 29 | ----> find in '${from}'` 30 | } 31 | 32 | // validator 的 warning 訊息 33 | export function createValidatorWarningMessage ({ columnName, expectToBe, from }: { 34 | columnName: string // e.g. 'seriesLabels' 35 | expectToBe: string // e.g. 'string[]' 36 | from: string // e.g. Chart.chartParams$, Pie.params$ 37 | }): string { 38 | return `${createMessagePrefix('warning')} Value is not correct: '${columnName}' suppose to be '${expectToBe}', it may cause unexpected errors.' 39 | 40 | ----> find in '${from}'` 41 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './commonUtils' 2 | export * from './d3Scale' 3 | export * from './observables' 4 | export * from './orbchartsUtils' -------------------------------------------------------------------------------- /packages/orbcharts-core/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports" : true, 12 | "esModuleInterop" : true 13 | } 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json" 3 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | interface ImportMetaEnv { 2 | readonly MODE: 'development' | 'production' 3 | } 4 | 5 | interface ImportMeta { 6 | readonly env: ImportMetaEnv; 7 | } -------------------------------------------------------------------------------- /packages/orbcharts-core/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import dts from 'vite-plugin-dts' 3 | 4 | export default defineConfig(({ command, mode }) => { 5 | return { 6 | plugins: [ 7 | dts({ 8 | insertTypesEntry: true 9 | }) 10 | ], 11 | compilerOptions: { 12 | composite: true 13 | }, 14 | build: { 15 | lib: { 16 | entry: "src/index.ts", 17 | name: 'orbcharts-core', 18 | formats: ["es", "umd"], 19 | fileName: format => `orbcharts-core.${format}.js` 20 | }, 21 | } 22 | } 23 | }) -------------------------------------------------------------------------------- /packages/orbcharts-demo/lib/core-types.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/core-types' 4 | 5 | // test 6 | // export * from '../../orbcharts-core-types/src' 7 | 8 | -------------------------------------------------------------------------------- /packages/orbcharts-demo/lib/plugins-basic-types.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/plugins-basic-types' 4 | 5 | // test 6 | // export * from '../../orbcharts-plugins-basic-types/src' 7 | -------------------------------------------------------------------------------- /packages/orbcharts-demo/lib/presets-basic.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/presets-basic' 4 | 5 | // test 6 | // export * from '../../orbcharts-presets-basic/src' 7 | -------------------------------------------------------------------------------- /packages/orbcharts-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orbcharts/demo", 3 | "version": "3.0.4", 4 | "description": "demo files for OrbCharts", 5 | "author": "Blue Planet Inc.", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "d3", 9 | "rxjs", 10 | "svg", 11 | "visualization", 12 | "infographic", 13 | "graph", 14 | "chart" 15 | ], 16 | "private": false, 17 | "publishConfig": { 18 | "access": "public", 19 | "registry": "https://registry.npmjs.org/" 20 | }, 21 | "files": [ 22 | "*" 23 | ], 24 | "module": "./dist/orbcharts-demo.es.js", 25 | "types": "./dist/src/index.d.ts", 26 | "scripts": { 27 | "test": "echo \"Error: no test specified\" && exit 1", 28 | "build": "vite build --mode production" 29 | }, 30 | "devDependencies": { 31 | "ts-loader": "^9.4.2", 32 | "typescript": "^5.0.4", 33 | "vite": "^5.3.5", 34 | "vite-plugin-dts": "^3.7.3" 35 | }, 36 | "dependencies": { 37 | "@orbcharts/core-types": "^3.0.3", 38 | "@orbcharts/plugins-basic-types": "^3.0.3", 39 | "@orbcharts/presets-basic": "^3.0.5" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/gridData1.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | 55, 4 | 80, 5 | 50, 6 | 11, 7 | 150 8 | ], 9 | [ 10 | 35, 11 | 40, 12 | 15, 13 | 65, 14 | 120 15 | ] 16 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/gridData2.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | 55, 4 | 80, 5 | 50, 6 | 11, 7 | 150 8 | ], 9 | [ 10 | 35, 11 | 40, 12 | 15, 13 | 65, 14 | 120 15 | ], 16 | [ 17 | 75, 18 | 90, 19 | 600, 20 | 50, 21 | 120 22 | ] 23 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/gridData3.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | 55, 4 | 80, 5 | 50, 6 | 11, 7 | 150 8 | ], 9 | [ 10 | 35, 11 | 40, 12 | 15, 13 | 65, 14 | 120 15 | ], 16 | [ 17 | 75, 18 | 90, 19 | 600, 20 | 50, 21 | 120 22 | ], 23 | [ 24 | 50, 25 | 60, 26 | 445, 27 | 80, 28 | 110 29 | ] 30 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/gridData4.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | 55, 4 | 80, 5 | 50, 6 | 11, 7 | 150 8 | ], 9 | [ 10 | -35, 11 | -40, 12 | -15, 13 | -65, 14 | -120 15 | ] 16 | ] 17 | 18 | // export default [ 19 | // [ 20 | // 0 21 | // ], 22 | // ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/multiGridData0.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | [ 4 | 1205, 5 | 850, 6 | 930, 7 | ], 8 | [ 9 | 1111, 10 | 1500, 11 | 735, 12 | ], 13 | ], 14 | [ 15 | [ 16 | 55, 17 | 60, 18 | 50 19 | ], 20 | [ 21 | 70, 22 | 75, 23 | 35 24 | ], 25 | ] 26 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/multiGridData1.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | [ 4 | 1205, 5 | 850, 6 | 930, 7 | 1111, 8 | 1500 9 | ], 10 | [ 11 | 735, 12 | 900, 13 | 880, 14 | 1035, 15 | 1120 16 | ] 17 | ], 18 | [ 19 | [ 20 | 55, 21 | 60, 22 | 50, 23 | 70, 24 | 75 25 | ], 26 | [ 27 | 35, 28 | 40, 29 | 45, 30 | 65, 31 | 80 32 | ] 33 | ], 34 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/multiGridData2.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | [ 4 | 1205, 5 | 850, 6 | 930, 7 | 1111, 8 | 1500 9 | ], 10 | [ 11 | 735, 12 | 900, 13 | 880, 14 | 1035, 15 | 1120 16 | ] 17 | ], 18 | [ 19 | [ 20 | 555, 21 | 805, 22 | 500, 23 | 1150, 24 | 1050 25 | ], 26 | [ 27 | 1350, 28 | 840, 29 | 915, 30 | 650, 31 | 1200 32 | ] 33 | ], 34 | [ 35 | [ 36 | 1200, 37 | 1100, 38 | 950, 39 | 1105, 40 | 850 41 | ], 42 | [ 43 | 750, 44 | 650, 45 | 980, 46 | 850, 47 | 700 48 | ] 49 | ], 50 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/multiGridData3.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | [ 4 | 1205, 5 | 850, 6 | 930, 7 | 1111, 8 | 1500 9 | ], 10 | [ 11 | 735, 12 | 900, 13 | 880, 14 | 1035, 15 | 1120 16 | ] 17 | ], 18 | [ 19 | [ 20 | 555, 21 | 805, 22 | 500, 23 | 1150, 24 | 1050 25 | ], 26 | [ 27 | 1350, 28 | 840, 29 | 915, 30 | 650, 31 | 1200 32 | ] 33 | ], 34 | [ 35 | [ 36 | 1200, 37 | 1100, 38 | 950, 39 | 1105, 40 | 850 41 | ], 42 | [ 43 | 750, 44 | 650, 45 | 980, 46 | 850, 47 | 700 48 | ] 49 | ], 50 | [ 51 | [ 52 | 680, 53 | 880, 54 | 770, 55 | 330, 56 | 710 57 | ], 58 | [ 59 | 540, 60 | 480, 61 | 820, 62 | 780, 63 | 600 64 | ] 65 | ], 66 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/multiGridData4.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | [ 4 | 1205, 5 | 850, 6 | 930, 7 | 1111, 8 | 1500 9 | ], 10 | [ 11 | 735, 12 | 900, 13 | 880, 14 | 1035, 15 | 1120 16 | ] 17 | ], 18 | [ 19 | [ 20 | -55, 21 | -60, 22 | -50, 23 | -70, 24 | -75 25 | ], 26 | [ 27 | -35, 28 | -40, 29 | -45, 30 | -65, 31 | -80 32 | ] 33 | ], 34 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/multiValue0.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [10, 25, 5], 3 | [5, 10, 5], 4 | [30, 45, 20], 5 | [35, 40, 25], 6 | [25, 30, 15], 7 | [55, 60, 40], 8 | // [45, 55, 30], 9 | [50, 85, 35], 10 | [20, 30, 15], 11 | [15, 25, 10], 12 | [70, 80, 5], 13 | [60, 70, 50], 14 | [45, 65, 35], 15 | [25, 35, 20], 16 | { 17 | value: [45, 55, 30], 18 | categoryLabel: 'category1' 19 | }, 20 | { 21 | value: [75, 35, 30], 22 | categoryLabel: 'category1' 23 | }, 24 | { 25 | value: [65, 25, 5], 26 | categoryLabel: 'category1' 27 | }, 28 | { 29 | value: [105, 85, 75], 30 | categoryLabel: 'category1' 31 | }, 32 | { 33 | value: [65, 45, 85], 34 | categoryLabel: 'category2' 35 | }, 36 | { 37 | value: [65, 65, 20], 38 | categoryLabel: 'category2' 39 | }, 40 | { 41 | value: [95, 60, 15], 42 | categoryLabel: 'category2' 43 | } 44 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/multiValue1.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [10, 25, 5], 3 | [5, 10, 5], 4 | [30, 45, 20], 5 | [35, 40, 25], 6 | [25, 30, 15], 7 | [55, 60, 40], 8 | // [45, 55, 30], 9 | [50, 85, 35], 10 | [20, 30, 15], 11 | [15, 25, 10], 12 | [70, 80, 5], 13 | [60, 70, 50], 14 | [45, 65, 35], 15 | [25, 35, 20], 16 | { 17 | value: [45, 55, 30], 18 | categoryLabel: 'category1' 19 | }, 20 | { 21 | value: [75, 35, 30], 22 | categoryLabel: 'category1' 23 | }, 24 | { 25 | value: [65, 25, 5], 26 | categoryLabel: 'category1' 27 | }, 28 | { 29 | value: [105, 85, 75], 30 | categoryLabel: 'category1' 31 | }, 32 | { 33 | value: [65, 45, 85], 34 | categoryLabel: 'category2' 35 | }, 36 | { 37 | value: [65, 65, 20], 38 | categoryLabel: 'category2' 39 | }, 40 | { 41 | value: [95, 60, 15], 42 | categoryLabel: 'category2' 43 | }, 44 | { 45 | value: [65, 95, 45], 46 | categoryLabel: 'category3' 47 | }, 48 | { 49 | value: [105, 25, 10], 50 | categoryLabel: 'category3' 51 | }, 52 | { 53 | value: [70, 70, 70], 54 | categoryLabel: 'category3' 55 | }, 56 | { 57 | value: [85, 95, 65], 58 | categoryLabel: 'category3' 59 | }, 60 | { 61 | value: [130, 90, 85], 62 | categoryLabel: 'category3' 63 | }, 64 | { 65 | value: [60, 75, 50], 66 | categoryLabel: 'category3' 67 | }, 68 | { 69 | value: [115, 120, 205], 70 | categoryLabel: 'category3' 71 | }, 72 | { 73 | value: [95, 80, 150], 74 | categoryLabel: 'category3' 75 | }, 76 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/seriesData1.ts: -------------------------------------------------------------------------------- 1 | export default [15,38,25,17,26,72,64,29, 2 | // 50, 20, 5, 15, 33, 80, 70, 40, 32, 46, 45 3 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/seriesData2.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | 80, 4 | 120, 5 | 45 6 | ], 7 | [ 8 | 50, 9 | 30, 10 | 15, 11 | 28, 12 | ], 13 | [ 14 | 55, 15 | 13, 16 | 38, 17 | 10, 18 | 5 19 | ] 20 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/data/seriesData4.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | [ 3 | { 4 | label: '2024', 5 | value: 458, 6 | }, 7 | { 8 | label: '2025', 9 | value: 440, 10 | }, 11 | ], 12 | [ 13 | { 14 | label: '2024', 15 | value: 255, 16 | }, 17 | { 18 | label: '2025', 19 | value: 270, 20 | }, 21 | ], 22 | [ 23 | { 24 | label: '2024', 25 | value: 155, 26 | }, 27 | { 28 | label: '2025', 29 | value: 170, 30 | }, 31 | ] 32 | ] -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './demo' 2 | export * from './utils' 3 | export * from './types' -------------------------------------------------------------------------------- /packages/orbcharts-demo/src/types.ts: -------------------------------------------------------------------------------- 1 | import type { ChartType, PresetPartial, PluginEntity, DataTypeMap } from '../lib/core-types' 2 | import type { PluginList } from '../lib/plugins-basic-types' 3 | import * as orbChartsPresetsBasic from '../lib/presets-basic' 4 | 5 | // type KeyOfOrbChartsPluginsBasic = keyof typeof orbChartsPluginsBasic 6 | type KeyOfOrbChartsPresetsBasic = keyof typeof orbChartsPresetsBasic 7 | 8 | // -- demo清單的資料 -- 9 | export interface DemoChartTypeItem { 10 | title: string 11 | chartType: ChartType 12 | list: DemoMainPluginsItem[] 13 | } 14 | 15 | export interface DemoMainPluginsItem { 16 | // title: KeyOfOrbChartsPluginsBasic 17 | title: string 18 | description: string 19 | descriptionZh: string 20 | mainPluginNames: PluginList[] 21 | list: DemoItem[] 22 | } 23 | 24 | export interface DemoItem { 25 | // title: KeyOfOrbChartsPresetsBasic 26 | // path: string 27 | title: string 28 | // chartType: 'series' | 'grid' | 'multiGrid' | 'multiValue' | 'relationship' | 'tree' 29 | presetName: KeyOfOrbChartsPresetsBasic 30 | description: string 31 | descriptionZh: string 32 | allPluginNames: PluginList[] 33 | getData: () => Promise 34 | } 35 | 36 | // -- 建立demo用的資料 -- 37 | export interface DemoData { 38 | preset: PresetPartial 39 | plugins: PluginEntity[] 40 | data: DataTypeMap 41 | } -------------------------------------------------------------------------------- /packages/orbcharts-demo/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports" : true, 12 | "esModuleInterop" : true 13 | } 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json" 3 | } -------------------------------------------------------------------------------- /packages/orbcharts-demo/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import dts from 'vite-plugin-dts' 3 | 4 | export default defineConfig(({ command, mode }) => { 5 | return { 6 | plugins: [ 7 | dts({ 8 | insertTypesEntry: true 9 | }) 10 | ], 11 | compilerOptions: { 12 | composite: true 13 | }, 14 | build: { 15 | lib: { 16 | entry: "src/index.ts", 17 | name: 'orbcharts-demo', 18 | formats: ["es", "umd"], 19 | fileName: format => `orbcharts-demo.${format}.js` 20 | }, 21 | } 22 | } 23 | }) -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/lib/core-types.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/core-types' 4 | 5 | // test 6 | // export * from '../../orbcharts-core-types/src' 7 | 8 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orbcharts/plugins-basic-types", 3 | "version": "3.0.3", 4 | "description": "Types of plugins for OrbCharts", 5 | "author": "Blue Planet Inc.", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "d3", 9 | "rxjs", 10 | "typescript", 11 | "svg", 12 | "visualization", 13 | "infographic", 14 | "graph", 15 | "chart" 16 | ], 17 | "private": false, 18 | "publishConfig": { 19 | "access": "public", 20 | "registry": "https://registry.npmjs.org/" 21 | }, 22 | "files": [ 23 | "*" 24 | ], 25 | "main": "./dist/orbcharts-plugins-basic-types.umd.js", 26 | "module": "./dist/orbcharts-plugins-basic-types.es.js", 27 | "types": "./dist/src/index.d.ts", 28 | "unpkg": "./dist/orbcharts-plugins-basic-types.umd.js", 29 | "jsdelivr": "./dist/orbcharts-plugins-basic-types.umd.js", 30 | "scripts": { 31 | "test": "echo \"Error: no test specified\" && exit 1", 32 | "build": "vite build --mode production" 33 | }, 34 | "devDependencies": { 35 | "@types/d3": "^7.4.0", 36 | "ts-loader": "^9.4.2", 37 | "typescript": "^5.0.4", 38 | "vite": "^5.3.5", 39 | "vite-plugin-dts": "^3.7.3" 40 | }, 41 | "dependencies": { 42 | "@orbcharts/core-types": "^3.0.3", 43 | "d3": "^7.8.5" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/src/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export * from './types' 3 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/src/types/Common.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | export type ArcScaleType = 'area' | 'radius' 5 | 6 | export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/src/types/NoneDataPluginParams.ts: -------------------------------------------------------------------------------- 1 | import type { ColorType, ChartType, EventTypeMap, EventBase } from '../../lib/core-types' 2 | 3 | export interface ContainerPluginParams { 4 | header: { 5 | height: number 6 | text: string[] 7 | textStyle: string[] 8 | } 9 | footer: { 10 | height: number 11 | text: string[] 12 | textStyle: string[] 13 | } 14 | } 15 | 16 | export type TooltipParams = { 17 | backgroundColorType: ColorType 18 | backgroundOpacity: number 19 | strokeColorType: ColorType 20 | textColorType: ColorType 21 | offset: [number, number] 22 | padding: number 23 | textRenderFn: ((eventData: EventTypeMap) => string[] | string) | null 24 | svgRenderFn: ((eventData: EventTypeMap) => string) | null 25 | } 26 | 27 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/src/types/TreePluginParams.ts: -------------------------------------------------------------------------------- 1 | import type { ColorType, ComputedDataTree, EventTree } from '../../lib/core-types' 2 | import type { BaseTooltipStyle, BaseTooltipUtils } from './BasePluginParams' 3 | import type { Placement } from './Common' 4 | 5 | export interface TreeMapParams { 6 | paddingInner: number 7 | paddingOuter: number 8 | labelColorType: ColorType 9 | squarifyRatio: number 10 | sort: (a: ComputedDataTree, b: ComputedDataTree) => number 11 | } 12 | 13 | export interface TreeLegendParams { 14 | // position: 'top' | 'bottom' | 'left' | 'right' 15 | // justify: 'start' | 'center' | 'end' 16 | placement: Placement 17 | padding: number 18 | backgroundFill: ColorType 19 | backgroundStroke: ColorType 20 | gap: number 21 | listRectWidth: number 22 | listRectHeight: number 23 | listRectRadius: number 24 | textColorType: ColorType 25 | } 26 | 27 | export interface TreeTooltipParams { 28 | backgroundColorType: ColorType 29 | backgroundOpacity: number 30 | strokeColorType: ColorType 31 | textColorType: ColorType 32 | offset: [number, number] 33 | padding: number 34 | // textRenderFn: ((eventData: EventTypeMap) => string[] | string) | null 35 | // svgRenderFn: ((eventData: EventTypeMap) => string) | null 36 | renderFn: ( 37 | ( 38 | eventData: EventTree, 39 | context: { 40 | styles: BaseTooltipStyle 41 | utils: BaseTooltipUtils 42 | } 43 | ) => string[] | string 44 | ) 45 | } -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Common' 2 | export * from './BasePluginParams' 3 | export * from './GridPluginParams' 4 | export * from './MultiGridPluginParams' 5 | export * from './MultiValuePluginParams' 6 | export * from './NoneDataPluginParams' 7 | export * from './PluginList' 8 | export * from './RelationshipPluginParams' 9 | export * from './SeriesPluginParams' 10 | export * from './TreePluginParams' 11 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports" : true, 12 | "esModuleInterop" : true 13 | } 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json" 3 | } -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic-types/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import dts from 'vite-plugin-dts' 3 | 4 | export default defineConfig(({ command, mode }) => { 5 | return { 6 | plugins: [ 7 | dts({ 8 | insertTypesEntry: true 9 | }) 10 | ], 11 | compilerOptions: { 12 | composite: true 13 | }, 14 | build: { 15 | lib: { 16 | entry: "src/index.ts", 17 | name: 'orbcharts-plugins-basic-types', 18 | formats: ["es", "umd"], 19 | fileName: format => `orbcharts-plugins-basic-types.${format}.js` 20 | }, 21 | } 22 | } 23 | }) -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/lib/core-types.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/core-types' 4 | 5 | // test 6 | // export * from '../../orbcharts-core-types/src' 7 | 8 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/lib/core.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/core' 4 | 5 | // test 6 | // export * from '../../orbcharts-core/src' 7 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/lib/gridObservables.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/core/src/grid/gridObservables' 4 | 5 | // test 6 | // export * from '../../orbcharts-core/src/grid/gridObservables' 7 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/lib/plugins-basic-types.ts: -------------------------------------------------------------------------------- 1 | 2 | export * from '@orbcharts/plugins-basic-types' 3 | 4 | // test 5 | // export * from '../../orbcharts-plugins-basic-types/src' 6 | 7 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orbcharts/plugins-basic", 3 | "version": "3.0.8", 4 | "description": "Plugins for OrbCharts", 5 | "author": "Blue Planet Inc.", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "d3", 9 | "rxjs", 10 | "typescript", 11 | "svg", 12 | "visualization", 13 | "infographic", 14 | "graph", 15 | "chart" 16 | ], 17 | "private": false, 18 | "publishConfig": { 19 | "access": "public", 20 | "registry": "https://registry.npmjs.org/" 21 | }, 22 | "files": [ 23 | "*" 24 | ], 25 | "main": "./dist/orbcharts-plugins-basic.umd.js", 26 | "module": "./dist/orbcharts-plugins-basic.es.js", 27 | "types": "./dist/src/index.d.ts", 28 | "unpkg": "./dist/orbcharts-plugins-basic.umd.js", 29 | "jsdelivr": "./dist/orbcharts-plugins-basic.umd.js", 30 | "scripts": { 31 | "test": "echo \"Error: no test specified\" && exit 1", 32 | "build": "vite build --mode production" 33 | }, 34 | "devDependencies": { 35 | "@types/d3": "^7.4.0", 36 | "ts-loader": "^9.4.2", 37 | "typescript": "^5.0.4", 38 | "vite": "^5.3.5", 39 | "vite-plugin-dts": "^3.7.3" 40 | }, 41 | "dependencies": { 42 | "@orbcharts/core": "^3.0.6", 43 | "@orbcharts/core-types": "^3.0.4", 44 | "@orbcharts/plugins-basic-types": "^3.0.3", 45 | "d3": "^7.8.5", 46 | "rxjs": "^7.8.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/base/types.ts: -------------------------------------------------------------------------------- 1 | export interface BasePluginFn { 2 | (pluginName: string, context: Context): () => void // return unsubscribe function 3 | } -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/const.ts: -------------------------------------------------------------------------------- 1 | 2 | // 圖層索引 - 底層（無圖型） 3 | export const LAYER_INDEX_OF_ROOT = 0 4 | 5 | // 圖層索引 - 背景 *預留 6 | export const LAYER_INDEX_OF_BG = 1 7 | 8 | // 圖層索引 - 圖軸 9 | export const LAYER_INDEX_OF_AXIS = 2 10 | 11 | // 圖層索引 - 輔助線、圖軸的輔助資訊 12 | export const LAYER_INDEX_OF_AUX = 3 13 | 14 | // 圖層索引 - 底層圖型 15 | export const LAYER_INDEX_OF_GRAPHIC_GROUND = 4 16 | 17 | // 圖層索引 - 一般圖型 18 | export const LAYER_INDEX_OF_GRAPHIC = 5 19 | 20 | // 圖層索引 - 覆蓋圖型 21 | export const LAYER_INDEX_OF_GRAPHIC_COVER = 6 22 | 23 | // 圖層索引 - 圖型上的標籤文字 24 | export const LAYER_INDEX_OF_LABEL = 7 25 | 26 | // 圖層索引 - 圖例、圖表上的文字 27 | export const LAYER_INDEX_OF_INFO = 8 28 | 29 | // 圖層索引 - Tooltip、事件觸發的覆蓋圖型 30 | export const LAYER_INDEX_OF_TOOLTIP = 9 31 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/grid/index.ts: -------------------------------------------------------------------------------- 1 | export * from './defaults' 2 | // export * from './types' 3 | export { Lines } from './plugins/Lines' 4 | export { LineAreas } from './plugins/LineAreas' 5 | export { Bars } from './plugins/Bars' 6 | export { BarsPN } from './plugins/BarsPN' 7 | export { StackedBars } from './plugins/StackedBars' 8 | export { BarsTriangle } from './plugins/BarsTriangle' 9 | export { Dots } from './plugins/Dots' 10 | export { GridLegend } from './plugins/GridLegend' 11 | export { GroupAxis } from './plugins/GroupAxis' 12 | export { ValueAxis } from './plugins/ValueAxis' 13 | export { StackedValueAxis } from './plugins/StackedValueAxis' 14 | export { GridTooltip } from './plugins/GridTooltip' 15 | export { GroupZoom } from './plugins/GroupZoom' 16 | export { GroupAux } from './plugins/GroupAux' 17 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './grid' 2 | export * from './multiGrid' 3 | export * from './multiValue' 4 | export * from './noneData' 5 | export * from './relationship' 6 | export * from './series' 7 | export * from './tree' -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/multiGrid/index.ts: -------------------------------------------------------------------------------- 1 | export * from './defaults' 2 | // export * from './types' 3 | export { MultiGridLegend } from './plugins/MultiGridLegend' 4 | export { MultiBars } from './plugins/MultiBars' 5 | export { MultiStackedBars } from './plugins/MultiStackedBars' 6 | export { MultiBarsTriangle } from './plugins/MultiBarsTriangle' 7 | export { MultiLines } from './plugins/MultiLines' 8 | export { MultiLineAreas } from './plugins/MultiLineAreas' 9 | export { MultiDots } from './plugins/MultiDots' 10 | export { MultiGroupAxis } from './plugins/MultiGroupAxis' 11 | export { MultiValueAxis } from './plugins/MultiValueAxis' 12 | export { MultiGridTooltip } from './plugins/MultiGridTooltip' 13 | export { MultiStackedValueAxis } from './plugins/MultiStackedValueAxis' 14 | export { OverlappingValueAxes } from './plugins/OverlappingValueAxes' 15 | export { OverlappingStackedValueAxes } from './plugins/OverlappingStackedValueAxes' -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/multiGrid/multiGridObservables.ts: -------------------------------------------------------------------------------- 1 | import type { Observable } from 'rxjs' 2 | import { 3 | Subject, 4 | takeUntil, 5 | of, 6 | map, 7 | reduce, 8 | switchMap, 9 | combineLatest, 10 | distinctUntilChanged, 11 | shareReplay 12 | } from 'rxjs' 13 | import type { 14 | ContextObserverMultiGrid, 15 | ComputedDataGrid, 16 | DataFormatterGrid, 17 | ContextObserverGridDetail, 18 | ContextObserverMultiGridDetail } from '../../lib/core-types' 19 | 20 | // 可設定多個gridIndex的params 21 | interface MultiGridPluginParams { 22 | gridIndexes: number[] | 'all' 23 | } 24 | 25 | // 對應grid資料的plugin所需Observable（必須有gridIndexes） 26 | export const multiGridPluginDetailObservables = (observer: ContextObserverMultiGrid): Observable => { 27 | const gridIndexes$ = observer.fullParams$.pipe( 28 | map(fullParams => fullParams.gridIndexes), 29 | distinctUntilChanged(), 30 | shareReplay(1) 31 | ) 32 | 33 | return combineLatest({ 34 | multiGridEachDetail: observer.multiGridEachDetail$, 35 | gridIndexes: gridIndexes$, 36 | }).pipe( 37 | switchMap(async d => d), 38 | map(data => { 39 | // 對應所有grid 40 | if (data.gridIndexes === 'all') { 41 | return data.multiGridEachDetail 42 | } 43 | // 自訂對應grid 44 | return data.gridIndexes.map(gridIndex => { 45 | return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0] 46 | }) 47 | }) 48 | ) 49 | } 50 | 51 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/multiValue/index.ts: -------------------------------------------------------------------------------- 1 | export * from './defaults' 2 | // export * from './types' 3 | export { MultiValueLegend } from './plugins/MultiValueLegend' 4 | export { MultiValueTooltip } from './plugins/MultiValueTooltip' 5 | export { OrdinalAux } from './plugins/OrdinalAux' 6 | export { OrdinalAxis } from './plugins/OrdinalAxis' 7 | export { OrdinalBubbles } from './plugins/OrdinalBubbles' 8 | export { OrdinalZoom } from './plugins/OrdinalZoom' 9 | export { RacingBars } from './plugins/RacingBars' 10 | export { RacingCounterTexts } from './plugins/RacingCounterTexts' 11 | export { RacingValueAxis } from './plugins/RacingValueAxis' 12 | export { Scatter } from './plugins/Scatter' 13 | export { ScatterBubbles } from './plugins/ScatterBubbles' 14 | export { XAxis } from './plugins/XAxis' 15 | export { XYAux } from './plugins/XYAux' 16 | export { XYAxes } from './plugins/XYAxes' 17 | export { XZoom } from './plugins/XZoom' -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/multiValue/plugins/RacingCounterAxis.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BPbase/orbcharts/4f35f399320084fd1c28d040ebe882809d4b29e3/packages/orbcharts-plugins-basic/src/multiValue/plugins/RacingCounterAxis.ts -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/multiValue/plugins/XZoom.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Subject } from 'rxjs' 3 | import type { DefinePluginConfig } from '../../../lib/core-types' 4 | import { 5 | defineMultiValuePlugin, createValueToAxisScale } from '../../../lib/core' 6 | import { DEFAULT_X_ZOOM_PARAMS } from '../defaults' 7 | import { LAYER_INDEX_OF_ROOT } from '../../const' 8 | import { createBaseXZoom } from '../../base/BaseXZoom' 9 | 10 | const pluginName = 'XZoom' 11 | 12 | const pluginConfig: DefinePluginConfig = { 13 | name: pluginName, 14 | defaultParams: DEFAULT_X_ZOOM_PARAMS, 15 | layerIndex: LAYER_INDEX_OF_ROOT, 16 | validator: (params, { validateColumns }) => { 17 | return { 18 | status: 'success', 19 | columnName: '', 20 | expectToBe: '' 21 | } 22 | } 23 | } 24 | 25 | export const XZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => { 26 | 27 | const destroy$ = new Subject() 28 | 29 | const unsubscribeBaseOrdinalBubbles = createBaseXZoom(pluginName, { 30 | rootSelection, 31 | fullDataFormatter$: observer.fullDataFormatter$, 32 | xyMinMax$: observer.xyMinMax$, 33 | layout$: observer.layout$, 34 | dataFormatter$: subject.dataFormatter$, 35 | }) 36 | 37 | return () => { 38 | destroy$.next(undefined) 39 | unsubscribeBaseOrdinalBubbles() 40 | } 41 | }) -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/noneData/index.ts: -------------------------------------------------------------------------------- 1 | export * from './defaults' 2 | // export * from './types' 3 | // export { Container } from './plugins/Container' 4 | // export { Tooltip } from './plugins/Tooltip' -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/noneData/plugins/Container.ts: -------------------------------------------------------------------------------- 1 | // import * as d3 from 'd3' 2 | // import type { DefinePluginConfig } from '../../../lib/core-types' 3 | // import { 4 | // defineNoneDataPlugin } from '../../../lib/core' 5 | // import { CONTAINER_PLUGIN_PARAMS } from '../defaults' 6 | // import { LAYER_INDEX_OF_BG } from '../../const' 7 | 8 | // const pluginName = 'Container' 9 | 10 | // const pluginConfig: DefinePluginConfig = { 11 | // name: pluginName, 12 | // defaultParams: CONTAINER_PLUGIN_PARAMS, 13 | // layerIndex: LAYER_INDEX_OF_BG, 14 | // validator: (params, { validateColumns }) => { 15 | // return { 16 | // status: 'success', 17 | // columnName: '', 18 | // expectToBe: '', 19 | // } 20 | // } 21 | // } 22 | 23 | // export const Container = defineNoneDataPlugin(pluginConfig)(({ selection }) => { 24 | 25 | // return function unsubscribe () { 26 | 27 | // } 28 | // }) -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/relationship/index.ts: -------------------------------------------------------------------------------- 1 | export * from './defaults' 2 | export { ForceDirected } from './plugins/ForceDirected' 3 | export { ForceDirectedBubbles } from './plugins/ForceDirectedBubbles' 4 | export { RelationshipLegend } from './plugins/RelationshipLegend' 5 | export { RelationshipTooltip } from './plugins/RelationshipTooltip' 6 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/relationship/relationshipObservables.ts: -------------------------------------------------------------------------------- 1 | import * as d3 from 'd3' 2 | import { 3 | Observable, 4 | Subject, 5 | of, 6 | takeUntil, 7 | filter, 8 | first, 9 | map, 10 | switchMap, 11 | combineLatest, 12 | merge, 13 | shareReplay, 14 | distinctUntilChanged 15 | } from 'rxjs' 16 | import type { 17 | ContainerPosition } from '../../lib/core-types' 18 | import { getClassName, getUniID } from '../utils/orbchartsUtils' 19 | 20 | // function createRelationshipSelection ({ selection, pluginName, separateSeries$, seriesLabels$ }: { 21 | // selection: d3.Selection 22 | // pluginName: string 23 | // separateSeries$: Observable 24 | // seriesLabels$: Observable 25 | // }) { 26 | // const seriesClassName = getClassName(pluginName, 'series') 27 | 28 | // return combineLatest({ 29 | // seriesLabels: seriesLabels$, 30 | // separateSeries: separateSeries$ 31 | // }).pipe( 32 | // switchMap(async d => d), 33 | // map((data, i) => { 34 | // const selectionData = data.separateSeries ? data.seriesLabels : [data.seriesLabels.join('')] 35 | // return selection 36 | // .selectAll(`g.${seriesClassName}`) 37 | // .data(selectionData, d => d) 38 | // .join( 39 | // enter => { 40 | // return enter 41 | // .append('g') 42 | // .classed(seriesClassName, true) 43 | // }, 44 | // update => update, 45 | // exit => exit.remove() 46 | // ) 47 | // }), 48 | // shareReplay(1) 49 | // ) 50 | // } -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/series/index.ts: -------------------------------------------------------------------------------- 1 | export * from './defaults' 2 | // export * from './types' 3 | export { Bubbles } from './plugins/Bubbles' 4 | export { Pie } from './plugins/Pie' 5 | export { PieEventTexts } from './plugins/PieEventTexts' 6 | export { PieLabels } from './plugins/PieLabels' 7 | export { Rose } from './plugins/Rose' 8 | export { RoseLabels } from './plugins/RoseLabels' 9 | export { SeriesLegend } from './plugins/SeriesLegend' 10 | export { SeriesTooltip } from './plugins/SeriesTooltip' -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/series/plugins/Waffle.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BPbase/orbcharts/4f35f399320084fd1c28d040ebe882809d4b29e3/packages/orbcharts-plugins-basic/src/series/plugins/Waffle.ts -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/series/seriesUtils.ts: -------------------------------------------------------------------------------- 1 | import * as d3 from 'd3' 2 | import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '../../lib/core-types' 3 | // import type { D3PieDatum, PieDatum } from '../types' 4 | 5 | // 由d3.pie()建出來的資料格式 6 | export interface D3PieDatum { 7 | data: any 8 | index: number, 9 | value: number, 10 | startAngle: number, 11 | endAngle: number, 12 | padAngle: number, 13 | } 14 | 15 | export interface PieDatum extends D3PieDatum { 16 | data: ComputedDatumSeries 17 | id: string 18 | } 19 | 20 | export function makePieData ({ data, startAngle, endAngle }: { 21 | data: ComputedDatumSeries[] 22 | startAngle: number 23 | endAngle: number 24 | // itemLabels: string[] 25 | // arcLabels: string[] 26 | }): PieDatum[] { 27 | let pie = d3.pie() 28 | .startAngle(startAngle) 29 | // .endAngle(startAngle + (endAngle - startAngle) * t) 30 | .endAngle(endAngle) 31 | .value(d => d.value) 32 | // .value((d) => d.visible == false ? 0 : d.value) 33 | // .sort(null) // 不要排序 34 | .sort((a, b) => a.seq - b.seq) 35 | // .sort((a: any, b: any) => { 36 | // return b.value - a.value 37 | // }) 38 | // .sort(d3.ascending) 39 | const pieData = pie(data) 40 | return pieData.map((d: D3PieDatum, i: number) => { 41 | // const itemLabel = d.data.itemLabel 42 | let _d: any = d 43 | _d.id = d.data.id 44 | return _d 45 | // return { 46 | // ...d, 47 | // itemIndex: itemLabels.indexOf(itemLabel), 48 | // itemLabel, 49 | // id: d.data.id, 50 | // } 51 | }) 52 | } -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/tree/index.ts: -------------------------------------------------------------------------------- 1 | export * from './defaults' 2 | // export * from './types' 3 | export { TreeLegend } from './plugins/TreeLegend' 4 | export { TreeMap } from './plugins/TreeMap' 5 | export { TreeTooltip } from './plugins/TreeTooltip' -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/utils/commonUtils.ts: -------------------------------------------------------------------------------- 1 | // 取得文字寬度 2 | export function measureTextWidth (text: string, size: number = 10) { 3 | const context = document.createElement("canvas").getContext("2d") 4 | let width = context?.measureText(text)?.width ?? 0 5 | return width * size / 10 // 以10為基準 6 | } 7 | 8 | // 取得最小及最大值 - 數字陣列 9 | export function getMinMax (data: number[]): [number, number] { 10 | const defaultMinMax: [number, number] = [0, 0] // default 11 | if (!data.length) { 12 | return defaultMinMax 13 | } 14 | const minMax: [number, number] = data.reduce((prev, current) => { 15 | // [min, max] 16 | return [ 17 | current < prev[0] ? current : prev[0], 18 | current > prev[1] ? current : prev[1] 19 | ] 20 | }, [data[0], data[0]]) 21 | return minMax 22 | } 23 | 24 | export function toCurrency (num: number | null): string { 25 | if (num === null || Number.isNaN(num) == true) { 26 | return String(num || 0) 27 | } 28 | const parts = num.toString().split('.') 29 | parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') 30 | return parts.join('.') 31 | } 32 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/src/utils/observables.ts: -------------------------------------------------------------------------------- 1 | import * as d3 from 'd3' 2 | import { Observable, merge, distinctUntilChanged, fromEvent } from 'rxjs' 3 | 4 | export function d3EventObservable(selection: d3.Selection, event: any) { 5 | // Start with an observable that will never emit 6 | let obs: Observable = new Observable(() => {}); 7 | selection.each(function () { 8 | // Create observables from each of the elements 9 | const events: Observable = fromEvent(this, event); 10 | // Merge the observables into one 11 | obs = merge(obs, events); 12 | }); 13 | return obs; 14 | } 15 | -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports" : true, 12 | "esModuleInterop" : true 13 | } 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json" 3 | } -------------------------------------------------------------------------------- /packages/orbcharts-plugins-basic/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import dts from 'vite-plugin-dts' 3 | 4 | export default defineConfig(({ command, mode }) => { 5 | return { 6 | plugins: [ 7 | dts({ 8 | insertTypesEntry: true 9 | }) 10 | ], 11 | compilerOptions: { 12 | composite: true 13 | }, 14 | build: { 15 | lib: { 16 | entry: "src/index.ts", 17 | name: 'orbcharts-plugins-basic', 18 | formats: ["es", "umd"], 19 | fileName: format => `orbcharts-plugins-basic.${format}.js` 20 | }, 21 | } 22 | } 23 | }) -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/lib/core-types.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/core-types' 4 | 5 | // test 6 | // export * from '../../orbcharts-core-types/src' 7 | 8 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/lib/plugins-basic-types.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export * from '@orbcharts/plugins-basic-types' 4 | 5 | // test 6 | // export * from '../../orbcharts-plugins-basic-types/src' 7 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orbcharts/presets-basic", 3 | "version": "3.0.5", 4 | "description": "Presets for OrbCharts", 5 | "author": "Blue Planet Inc.", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "d3", 9 | "rxjs", 10 | "typescript", 11 | "svg", 12 | "visualization", 13 | "infographic", 14 | "graph", 15 | "chart" 16 | ], 17 | "private": false, 18 | "publishConfig": { 19 | "access": "public", 20 | "registry": "https://registry.npmjs.org/" 21 | }, 22 | "files": [ 23 | "*" 24 | ], 25 | "main": "./dist/orbcharts-presets-basic.umd.js", 26 | "module": "./dist/orbcharts-presets-basic.es.js", 27 | "types": "./dist/src/index.d.ts", 28 | "unpkg": "./dist/orbcharts-presets-basic.umd.js", 29 | "jsdelivr": "./dist/orbcharts-presets-basic.umd.js", 30 | "scripts": { 31 | "test": "echo \"Error: no test specified\" && exit 1", 32 | "build": "vite build --mode production" 33 | }, 34 | "devDependencies": { 35 | "@types/d3": "^7.4.0", 36 | "ts-loader": "^9.4.2", 37 | "typescript": "^5.0.4", 38 | "vite": "^5.3.5", 39 | "vite-plugin-dts": "^3.7.3" 40 | }, 41 | "dependencies": { 42 | "@orbcharts/core-types": "^3.0.3", 43 | "@orbcharts/plugins-basic-types": "^3.0.3", 44 | "d3": "^7.8.5" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_BARS_THIN.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, 3 | PresetNoneDataPluginParams 4 | } from '../types' 5 | 6 | export const PRESET_BARS_THIN: PresetPartial<'grid', Partial 7 | & Partial> = { 8 | name: 'PRESET_BARS_THIN', 9 | description: 'Thin bars', 10 | descriptionZh: '細長條圖', 11 | chartParams: { 12 | colors: { 13 | light: { 14 | label: [ 15 | "#0088FF", 16 | "#FF72BB", 17 | "#16B59B", 18 | "#F9B052", 19 | "#6F3BD5", 20 | "#42C724", 21 | "#FF3232", 22 | "#904026", 23 | "#1F3172", 24 | "#E23D93" 25 | ], 26 | }, 27 | dark: { 28 | label: [ 29 | "#4BABFF", 30 | "#FFA0A0", 31 | "#7DD3C4", 32 | "#FAC77D", 33 | "#8454D4", 34 | "#42C724", 35 | "#FF6C6C", 36 | "#D4785A", 37 | "#5366AC", 38 | "#FF8DC8" 39 | ] 40 | } 41 | }, 42 | padding: { 43 | top: 40, 44 | right: 40, 45 | bottom: 100, 46 | left: 80 47 | }, 48 | }, 49 | pluginParams: { 50 | Bars: { 51 | barWidth: 20, 52 | barPadding: 1, 53 | barGroupPadding: 10 54 | }, 55 | GroupAxis: {}, 56 | ValueAxis: {}, 57 | GroupAux: {}, 58 | GridLegend: { 59 | // position: 'bottom', 60 | // justify: 'center', 61 | placement: 'bottom', 62 | padding: 14, 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_GRID_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_GRID_BASIC: PresetPartial<'grid', Partial 5 | & Partial> = { 6 | name: 'PRESET_GRID_BASIC', 7 | description: 'Basic Grid', 8 | descriptionZh: '基本Grid', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 100, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | GridLegend: { 49 | placement: 'bottom', 50 | padding: 14, 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_GRID_HORIZONTAL.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_GRID_HORIZONTAL: PresetPartial<'grid', Partial 5 | & Partial> = { 6 | name: 'PRESET_GRID_HORIZONTAL', 7 | description: 'Horizontal Grid', 8 | descriptionZh: '橫向圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | // 間距下面及左邊留空 41 | padding: { 42 | top: 40, 43 | right: 40, 44 | bottom: 100, 45 | left: 160 46 | }, 47 | }, 48 | dataFormatter: { 49 | valueAxis: { 50 | position: 'bottom' 51 | }, 52 | groupAxis: { 53 | position: 'left' 54 | }, 55 | }, 56 | pluginParams: { 57 | GridLegend: { 58 | placement: 'bottom', 59 | padding: 14, 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_GRID_PN_SCALE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_GRID_PN_SCALE: PresetPartial<'grid', Partial 5 | & Partial> = { 6 | name: 'PRESET_GRID_PN_SCALE', 7 | description: 'Positive negative scale', 8 | descriptionZh: '正負值分向圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 100, 44 | left: 80 45 | }, 46 | }, 47 | dataFormatter: { 48 | valueAxis: { 49 | scaleDomain: ['auto', 'auto'], 50 | scaleRange: [0.05, 0.95], 51 | }, 52 | }, 53 | pluginParams: { 54 | GridLegend: { 55 | placement: 'bottom', 56 | padding: 14, 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_GRID_PN_SCALE_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_GRID_PN_SCALE_SIMPLE: PresetPartial<'grid', Partial 5 | & Partial> = { 6 | name: 'PRESET_GRID_PN_SCALE_SIMPLE', 7 | description: 'Simple positive negative scale', 8 | descriptionZh: '簡單正負值分向圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 80, 44 | left: 40 45 | }, 46 | }, 47 | dataFormatter: { 48 | valueAxis: { 49 | scaleDomain: ['auto', 'auto'], 50 | scaleRange: [0.05, 0.95], 51 | }, 52 | }, 53 | pluginParams: { 54 | GridLegend: { 55 | placement: 'bottom', 56 | padding: 7, 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_GRID_ROTATE_AXIS_LABEL.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_GRID_ROTATE_AXIS_LABEL: PresetPartial<'grid', Partial 5 | & Partial> = { 6 | name: 'PRESET_GRID_ROTATE_AXIS_LABEL', 7 | description: 'Rotate axis label', 8 | descriptionZh: '傾斜標籤', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | // 間距下面加長留空 41 | padding: { 42 | top: 40, 43 | right: 40, 44 | bottom: 120, 45 | left: 80 46 | }, 47 | }, 48 | pluginParams: { 49 | GroupAux: { 50 | labelRotate: -30 51 | }, 52 | GroupAxis: { 53 | tickPadding: 15, 54 | tickTextRotate: -30 55 | }, 56 | GridLegend: { 57 | placement: 'bottom', 58 | padding: 14, 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_GRID_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_GRID_SIMPLE: PresetPartial<'grid', Partial 5 | & Partial> = { 6 | name: 'PRESET_GRID_SIMPLE', 7 | description: 'Simple Grid', 8 | descriptionZh: '簡單Grid', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 80, 44 | left: 40 45 | }, 46 | }, 47 | dataFormatter: { 48 | valueAxis: { 49 | scaleRange: [0, 0.95] 50 | } 51 | }, 52 | pluginParams: { 53 | GridLegend: { 54 | placement: 'bottom', 55 | padding: 7, 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_LINES_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, 3 | PresetNoneDataPluginParams 4 | } from '../types' 5 | 6 | export const PRESET_LINES_BASIC: PresetPartial<'grid', Partial 7 | & Partial> = { 8 | name: 'PRESET_LINES_BASIC', 9 | description: 'Basic Line', 10 | descriptionZh: '基本折線圖', 11 | chartParams: { 12 | colors: { 13 | light: { 14 | label: [ 15 | "#0088FF", 16 | "#FF72BB", 17 | "#16B59B", 18 | "#F9B052", 19 | "#6F3BD5", 20 | "#42C724", 21 | "#FF3232", 22 | "#904026", 23 | "#1F3172", 24 | "#E23D93" 25 | ], 26 | }, 27 | dark: { 28 | label: [ 29 | "#4BABFF", 30 | "#FFA0A0", 31 | "#7DD3C4", 32 | "#FAC77D", 33 | "#8454D4", 34 | "#42C724", 35 | "#FF6C6C", 36 | "#D4785A", 37 | "#5366AC", 38 | "#FF8DC8" 39 | ] 40 | } 41 | }, 42 | padding: { 43 | top: 40, 44 | right: 40, 45 | bottom: 100, 46 | left: 80 47 | }, 48 | highlightTarget: 'series' 49 | }, 50 | pluginParams: { 51 | Lines: {}, 52 | Dots: {}, 53 | GroupAxis: {}, 54 | ValueAxis: {}, 55 | GroupAux: {}, 56 | GridLegend: { 57 | placement: 'bottom', 58 | padding: 14, 59 | listRectHeight: 2 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_LINES_CURVE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, 3 | PresetNoneDataPluginParams 4 | } from '../types' 5 | 6 | export const PRESET_LINES_CURVE: PresetPartial<'grid', Partial 7 | & Partial> = { 8 | name: 'PRESET_LINES_CURVE', 9 | description: 'Curve Line', 10 | descriptionZh: '弧線折線圖', 11 | chartParams: { 12 | colors: { 13 | light: { 14 | label: [ 15 | "#0088FF", 16 | "#FF72BB", 17 | "#16B59B", 18 | "#F9B052", 19 | "#6F3BD5", 20 | "#42C724", 21 | "#FF3232", 22 | "#904026", 23 | "#1F3172", 24 | "#E23D93" 25 | ], 26 | }, 27 | dark: { 28 | label: [ 29 | "#4BABFF", 30 | "#FFA0A0", 31 | "#7DD3C4", 32 | "#FAC77D", 33 | "#8454D4", 34 | "#42C724", 35 | "#FF6C6C", 36 | "#D4785A", 37 | "#5366AC", 38 | "#FF8DC8" 39 | ] 40 | } 41 | }, 42 | padding: { 43 | top: 40, 44 | right: 40, 45 | bottom: 100, 46 | left: 80 47 | }, 48 | highlightTarget: 'series' 49 | }, 50 | pluginParams: { 51 | Lines: { 52 | lineCurve: 'curveMonotoneX', 53 | lineWidth: 3 54 | }, 55 | Dots: {}, 56 | GroupAxis: {}, 57 | ValueAxis: {}, 58 | GroupAux: {}, 59 | GridLegend: { 60 | placement: 'bottom', 61 | padding: 14, 62 | listRectHeight: 2 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_LINES_HIGHLIGHT_GROUP_DOTS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, 3 | PresetNoneDataPluginParams 4 | } from '../types' 5 | 6 | export const PRESET_LINES_HIGHLIGHT_GROUP_DOTS: PresetPartial<'grid', Partial 7 | & Partial> = { 8 | name: 'PRESET_LINES_HIGHLIGHT_GROUP_DOTS', 9 | description: 'Highlight Group Dots', 10 | descriptionZh: 'Highlight Group圓點的折線圖', 11 | chartParams: { 12 | colors: { 13 | light: { 14 | label: [ 15 | "#0088FF", 16 | "#FF72BB", 17 | "#16B59B", 18 | "#F9B052", 19 | "#6F3BD5", 20 | "#42C724", 21 | "#FF3232", 22 | "#904026", 23 | "#1F3172", 24 | "#E23D93" 25 | ], 26 | }, 27 | dark: { 28 | label: [ 29 | "#4BABFF", 30 | "#FFA0A0", 31 | "#7DD3C4", 32 | "#FAC77D", 33 | "#8454D4", 34 | "#42C724", 35 | "#FF6C6C", 36 | "#D4785A", 37 | "#5366AC", 38 | "#FF8DC8" 39 | ] 40 | } 41 | }, 42 | padding: { 43 | top: 40, 44 | right: 40, 45 | bottom: 100, 46 | left: 80 47 | }, 48 | highlightTarget: 'group' 49 | }, 50 | pluginParams: { 51 | Lines: {}, 52 | Dots: { 53 | onlyShowHighlighted: false 54 | }, 55 | GroupAxis: {}, 56 | ValueAxis: {}, 57 | GroupAux: {}, 58 | GridLegend: { 59 | placement: 'bottom', 60 | padding: 14, 61 | listRectHeight: 2 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_LINES_LOOSE_TICKS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, 3 | PresetNoneDataPluginParams 4 | } from '../types' 5 | 6 | export const PRESET_LINES_LOOSE_TICKS: PresetPartial<'grid', Partial 7 | & Partial> = { 8 | name: 'PRESET_LINES_LOOSE_TICKS', 9 | description: 'Loose Ticks Line', 10 | descriptionZh: '寬鬆標籤的折線圖', 11 | chartParams: { 12 | colors: { 13 | light: { 14 | label: [ 15 | "#0088FF", 16 | "#FF72BB", 17 | "#16B59B", 18 | "#F9B052", 19 | "#6F3BD5", 20 | "#42C724", 21 | "#FF3232", 22 | "#904026", 23 | "#1F3172", 24 | "#E23D93" 25 | ], 26 | }, 27 | dark: { 28 | label: [ 29 | "#4BABFF", 30 | "#FFA0A0", 31 | "#7DD3C4", 32 | "#FAC77D", 33 | "#8454D4", 34 | "#42C724", 35 | "#FF6C6C", 36 | "#D4785A", 37 | "#5366AC", 38 | "#FF8DC8" 39 | ] 40 | } 41 | }, 42 | padding: { 43 | top: 40, 44 | right: 40, 45 | bottom: 100, 46 | left: 80 47 | }, 48 | highlightTarget: 'series' 49 | }, 50 | pluginParams: { 51 | Lines: {}, 52 | Dots: {}, 53 | GroupAxis: { 54 | ticks: 6 55 | }, 56 | ValueAxis: {}, 57 | GroupAux: {}, 58 | GridLegend: { 59 | placement: 'bottom', 60 | padding: 14, 61 | listRectHeight: 2 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/grid/PRESET_LINES_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetGridPluginParams, 3 | PresetNoneDataPluginParams 4 | } from '../types' 5 | 6 | export const PRESET_LINES_SIMPLE: PresetPartial<'grid', Partial 7 | & Partial> = { 8 | name: 'PRESET_LINES_SIMPLE', 9 | description: 'Simple line', 10 | descriptionZh: '簡單折線圖', 11 | chartParams: { 12 | colors: { 13 | light: { 14 | label: [ 15 | "#0088FF", 16 | "#FF72BB", 17 | "#16B59B", 18 | "#F9B052", 19 | "#6F3BD5", 20 | "#42C724", 21 | "#FF3232", 22 | "#904026", 23 | "#1F3172", 24 | "#E23D93" 25 | ], 26 | }, 27 | dark: { 28 | label: [ 29 | "#4BABFF", 30 | "#FFA0A0", 31 | "#7DD3C4", 32 | "#FAC77D", 33 | "#8454D4", 34 | "#42C724", 35 | "#FF6C6C", 36 | "#D4785A", 37 | "#5366AC", 38 | "#FF8DC8" 39 | ] 40 | } 41 | }, 42 | padding: { 43 | top: 40, 44 | right: 40, 45 | bottom: 80, 46 | left: 40 47 | }, 48 | highlightTarget: 'series' 49 | }, 50 | dataFormatter: { 51 | valueAxis: { 52 | scaleRange: [0, 0.95] 53 | } 54 | }, 55 | pluginParams: { 56 | Lines: {}, 57 | Dots: {}, 58 | GroupAxis: {}, 59 | ValueAxis: {}, 60 | GroupAux: {}, 61 | GridLegend: { 62 | placement: 'bottom', 63 | padding: 7, 64 | listRectHeight: 2 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './series' 2 | export * from './grid' 3 | export * from './multiGrid' 4 | export * from './multiValue' 5 | export * from './relationship' 6 | export * from './tree' 7 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiGrid/PRESET_MULTI_GRID_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { 3 | PresetMultiGridPluginParams, 4 | PresetNoneDataPluginParams 5 | } from '../types' 6 | 7 | export const PRESET_MULTI_GRID_BASIC: PresetPartial<'multiGrid', Partial 8 | & Partial> = { 9 | name: 'PRESET_MULTI_GRID_BASIC', 10 | description: 'Basic MultiGrid', 11 | descriptionZh: '基本MultiGrid', 12 | chartParams: { 13 | colors: { 14 | light: { 15 | label: [ 16 | "#0088FF", 17 | "#16B59B", 18 | "#6F3BD5", 19 | "#EE5F13", 20 | "#F9B052", 21 | "#D4785A", 22 | "#42C724", 23 | "#FF4B4B", 24 | "#1F3172", 25 | "#E23D93" 26 | ], 27 | }, 28 | dark: { 29 | label: [ 30 | "#4BABFF", 31 | "#7DD3C4", 32 | "#8454D4", 33 | "#FF6C6C", 34 | "#FAC77D", 35 | "#D58C75", 36 | "#42C724", 37 | "#FF8B8B", 38 | "#5366AC", 39 | "#FF8DC8" 40 | ] 41 | } 42 | }, 43 | padding: { 44 | top: 40, 45 | right: 40, 46 | bottom: 100, 47 | left: 80 48 | }, 49 | highlightTarget: 'series' 50 | }, 51 | pluginParams: { 52 | MultiGridLegend: { 53 | placement: 'bottom', 54 | padding: 14, 55 | gridList: [ 56 | { 57 | }, 58 | { 59 | listRectHeight: 2, 60 | } 61 | ] 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiGrid/index.ts: -------------------------------------------------------------------------------- 1 | export { PRESET_MULTI_GRID_BASIC } from './PRESET_MULTI_GRID_BASIC' 2 | export { PRESET_MULTI_GRID_DIVERGING_SIMPLE } from './PRESET_MULTI_GRID_DIVERGING_SIMPLE' 3 | export { PRESET_MULTI_GRID_DIVERGING } from './PRESET_MULTI_GRID_DIVERGING' 4 | export { PRESET_MULTI_GRID_ROUND_STYLE_SIMPLE } from './PRESET_MULTI_GRID_ROUND_STYLE_SIMPLE' 5 | export { PRESET_MULTI_GRID_ROUND_STYLE } from './PRESET_MULTI_GRID_ROUND_STYLE' 6 | export { PRESET_MULTI_GRID_SEPARATE_GRID_SIMPLE } from './PRESET_MULTI_GRID_SEPARATE_GRID_SIMPLE' 7 | export { PRESET_MULTI_GRID_SEPARATE_GRID } from './PRESET_MULTI_GRID_SEPARATE_GRID' 8 | export { PRESET_MULTI_GRID_SIMPLE } from './PRESET_MULTI_GRID_SIMPLE' 9 | export { PRESET_MULTI_LINE_AREAS_SEPARATE_GRID_SIMPLE } from './PRESET_MULTI_LINE_AREAS_SEPARATE_GRID_SIMPLE' 10 | export { PRESET_MULTI_LINE_AREAS_SEPARATE_GRID } from './PRESET_MULTI_LINE_AREAS_SEPARATE_GRID' 11 | export { PRESET_MULTI_LINES_SEPARATE_GRID_SIMPLE } from './PRESET_MULTI_LINES_SEPARATE_GRID_SIMPLE' 12 | export { PRESET_MULTI_LINES_SEPARATE_GRID } from './PRESET_MULTI_LINES_SEPARATE_GRID' 13 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_MULTI_VALUE_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_MULTI_VALUE_BASIC: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_MULTI_VALUE_BASIC', 7 | description: 'Basic MultiValue', 8 | descriptionZh: '基本MultiValue參數', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#7DD3C4", 14 | "#FFA0A0", 15 | "#6CBAFF", 16 | "#55D339", 17 | "#F9B052", 18 | "#FF6C6C", 19 | "#8E6BC9", 20 | "#0088FF", 21 | "#904026", 22 | "#C4C4C4" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#7DD3C4", 28 | "#FFA0A0", 29 | "#6CBAFF", 30 | "#55D339", 31 | "#F9B052", 32 | "#FF6C6C", 33 | "#8E6BC9", 34 | "#0088FF", 35 | "#904026", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 100, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | MultiValueLegend: { 49 | placement: 'bottom', 50 | padding: 14, 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_MULTI_VALUE_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_MULTI_VALUE_SIMPLE: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_MULTI_VALUE_SIMPLE', 7 | description: 'Simple MultiValue', 8 | descriptionZh: '簡單MultiValue參數', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#7DD3C4", 14 | "#FFA0A0", 15 | "#6CBAFF", 16 | "#55D339", 17 | "#F9B052", 18 | "#FF6C6C", 19 | "#8E6BC9", 20 | "#0088FF", 21 | "#904026", 22 | "#C4C4C4" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#7DD3C4", 28 | "#FFA0A0", 29 | "#6CBAFF", 30 | "#55D339", 31 | "#F9B052", 32 | "#FF6C6C", 33 | "#8E6BC9", 34 | "#0088FF", 35 | "#904026", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 60, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | MultiValueLegend: { 49 | placement: 'bottom', 50 | padding: 7, 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_ORDINAL_BUBBLES_ALL_ITEMS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ORDINAL_BUBBLES_ALL_ITEMS: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_ORDINAL_BUBBLES_ALL_ITEMS', 7 | description: 'Ordinal bubbles with all items', 8 | descriptionZh: '顯示全部項目的序數泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 40, 43 | bottom: 60, 44 | left: 160 45 | }, 46 | }, 47 | pluginParams: { 48 | OrdinalBubbles: { 49 | rankingAmount: 'auto', 50 | }, 51 | MultiValueLegend: { 52 | placement: 'bottom', 53 | padding: 14, 54 | listRectRadius: 7 // 圓型圖例列點 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_ORDINAL_BUBBLES_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ORDINAL_BUBBLES_BASIC: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_ORDINAL_BUBBLES_BASIC', 7 | description: 'Basic ordinal bubbles', 8 | descriptionZh: '序數泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 40, 43 | bottom: 60, 44 | left: 160 45 | }, 46 | }, 47 | pluginParams: { 48 | OrdinalBubbles: { 49 | }, 50 | MultiValueLegend: { 51 | placement: 'bottom', 52 | padding: 14, 53 | listRectRadius: 7 // 圓型圖例列點 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_ORDINAL_BUBBLES_LINEAR_OPACITY.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ORDINAL_BUBBLES_LINEAR_OPACITY: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_ORDINAL_BUBBLES_LINEAR_OPACITY', 7 | description: 'Ordinal bubbles with linear opacity', 8 | descriptionZh: '漸變透明度的序數泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 40, 43 | bottom: 60, 44 | left: 160 45 | }, 46 | }, 47 | pluginParams: { 48 | OrdinalBubbles: { 49 | bubble: { 50 | valueLinearOpacity: [0.5, 1] 51 | } 52 | }, 53 | MultiValueLegend: { 54 | placement: 'bottom', 55 | padding: 14, 56 | listRectRadius: 7 // 圓型圖例列點 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_ORDINAL_BUBBLES_SCALING_BY_RADIUS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ORDINAL_BUBBLES_SCALING_BY_RADIUS: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_ORDINAL_BUBBLES_SCALING_BY_RADIUS', 7 | description: 'Ordinal bubbles with radius scaling', 8 | descriptionZh: '以半徑尺寸為比例的序數泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 40, 43 | bottom: 60, 44 | left: 160 45 | }, 46 | }, 47 | pluginParams: { 48 | OrdinalBubbles: { 49 | bubble: { 50 | arcScaleType: 'radius', 51 | } 52 | }, 53 | MultiValueLegend: { 54 | placement: 'bottom', 55 | padding: 14, 56 | listRectRadius: 7 // 圓型圖例列點 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_ORDINAL_BUBBLES_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ORDINAL_BUBBLES_SIMPLE: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_ORDINAL_BUBBLES_SIMPLE', 7 | description: 'Simple ordinal bubbles', 8 | descriptionZh: '簡單的序數泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 40, 43 | bottom: 60, 44 | left: 140 45 | }, 46 | }, 47 | pluginParams: { 48 | OrdinalBubbles: { 49 | }, 50 | OrdinalAxis: { 51 | ticks: 2, 52 | }, 53 | MultiValueLegend: { 54 | placement: 'bottom', 55 | padding: 7, 56 | listRectRadius: 7 // 圓型圖例列點 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_RACING_BARS_ALL_ITEMS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_RACING_BARS_ALL_ITEMS: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_RACING_BARS_ALL_ITEMS', 7 | description: 'Racing bars for all items', 8 | descriptionZh: '顯示全部項目的賽跑長條圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 60, 43 | bottom: 100, 44 | left: 60 45 | }, 46 | transitionDuration: 500 47 | }, 48 | pluginParams: { 49 | RacingBars: { 50 | rankingAmount: 'auto', 51 | autorun: true, 52 | }, 53 | MultiValueLegend: { 54 | placement: 'bottom', 55 | padding: 14, 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_RACING_BARS_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_RACING_BARS_BASIC: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_RACING_BARS_BASIC', 7 | description: 'Basic racing bars', 8 | descriptionZh: '基本賽跑長條圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 60, 43 | bottom: 100, 44 | left: 60 45 | }, 46 | transitionDuration: 500 47 | }, 48 | pluginParams: { 49 | RacingBars: { 50 | autorun: true, 51 | }, 52 | MultiValueLegend: { 53 | placement: 'bottom', 54 | padding: 14, 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_RACING_BARS_FAST.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_RACING_BARS_FAST: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_RACING_BARS_FAST', 7 | description: 'Fast racing bars', 8 | descriptionZh: '快速的賽跑長條圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 60, 43 | bottom: 100, 44 | left: 60 45 | }, 46 | transitionDuration: 250 47 | }, 48 | pluginParams: { 49 | RacingBars: { 50 | autorun: true, 51 | }, 52 | MultiValueLegend: { 53 | placement: 'bottom', 54 | padding: 14, 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_RACING_BARS_FASTER.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_RACING_BARS_FASTER: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_RACING_BARS_FASTER', 7 | description: 'Faster racing bars', 8 | descriptionZh: '更快速的賽跑長條圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 60, 43 | bottom: 100, 44 | left: 60 45 | }, 46 | transitionDuration: 125 47 | }, 48 | pluginParams: { 49 | RacingBars: { 50 | autorun: true, 51 | }, 52 | MultiValueLegend: { 53 | placement: 'bottom', 54 | padding: 14, 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_RACING_BARS_LOOP.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_RACING_BARS_LOOP: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_RACING_BARS_LOOP', 7 | description: 'Looping racing bars', 8 | descriptionZh: '循環的賽跑長條圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 60, 43 | bottom: 100, 44 | left: 60 45 | }, 46 | transitionDuration: 500 47 | }, 48 | pluginParams: { 49 | RacingBars: { 50 | autorun: true, 51 | loop: true, 52 | }, 53 | MultiValueLegend: { 54 | placement: 'bottom', 55 | padding: 14, 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_RACING_BARS_OUTSIDE_LABELS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_RACING_BARS_OUTSIDE_LABELS: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_RACING_BARS_OUTSIDE_LABELS', 7 | description: 'Racing bars with labels outside', 8 | descriptionZh: '標籤在外面的賽跑長條圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 60, 43 | bottom: 100, 44 | left: 160 45 | }, 46 | transitionDuration: 500 47 | }, 48 | pluginParams: { 49 | RacingBars: { 50 | barLabel: { 51 | position: 'outside', 52 | colorType: 'primary' 53 | }, 54 | autorun: true, 55 | }, 56 | MultiValueLegend: { 57 | placement: 'bottom', 58 | padding: 14, 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_RACING_BARS_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_RACING_BARS_SIMPLE: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_RACING_BARS_SIMPLE', 7 | description: 'Simple racing bars', 8 | descriptionZh: '簡單賽跑長條圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 40, 43 | bottom: 40, 44 | left: 40 45 | }, 46 | transitionDuration: 500 47 | }, 48 | pluginParams: { 49 | RacingBars: { 50 | autorun: true, 51 | }, 52 | MultiValueLegend: { 53 | placement: 'bottom', 54 | padding: 7, 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_RACING_BARS_STOP.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_RACING_BARS_STOP: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_RACING_BARS_STOP', 7 | description: 'Stopped racing bars', 8 | descriptionZh: '停止的賽跑長條圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 60, 42 | right: 60, 43 | bottom: 100, 44 | left: 60 45 | }, 46 | }, 47 | pluginParams: { 48 | RacingBars: { 49 | autorun: false, 50 | }, 51 | MultiValueLegend: { 52 | placement: 'bottom', 53 | padding: 14, 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_SCATTER_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SCATTER_BASIC: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_SCATTER_BASIC', 7 | description: 'Basic scatter', 8 | descriptionZh: '基本散布圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label:[ 13 | "#16B59B", 14 | "#0088FF", 15 | "#FF3232", 16 | "#8E6BC9", 17 | "#904026", 18 | "#E23D93", 19 | "#F38428", 20 | "#6BDC51", 21 | "#C50669", 22 | "#4B25B3" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#7DD3C4", 28 | "#4BABFF", 29 | "#FF6C6C", 30 | "#AA93D2", 31 | "#D58C75", 32 | "#FF8DC8", 33 | "#F9B052", 34 | "#ACE1A0", 35 | "#F35CAA", 36 | "#6F3BD5" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 100, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | MultiValueLegend: { 49 | placement: 'bottom', 50 | padding: 14, 51 | listRectRadius: 7 // 圓型圖例列點 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_SCATTER_BUBBLES_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SCATTER_BUBBLES_BASIC: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_SCATTER_BUBBLES_BASIC', 7 | description: 'Basic scatter bubbles', 8 | descriptionZh: '基本的散布泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 100, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | MultiValueLegend: { 49 | placement: 'bottom', 50 | padding: 14, 51 | listRectRadius: 7 // 圓型圖例列點 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_SCATTER_BUBBLES_LINEAR_OPACITY.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SCATTER_BUBBLES_LINEAR_OPACITY: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_SCATTER_BUBBLES_LINEAR_OPACITY', 7 | description: 'Scatter bubbles with linear opacity', 8 | descriptionZh: '以資料量漸變透明度的散布泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 100, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | MultiValueLegend: { 49 | placement: 'bottom', 50 | padding: 14, 51 | listRectRadius: 7 // 圓型圖例列點 52 | }, 53 | ScatterBubbles: { 54 | valueLinearOpacity: [0.5, 1] 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_SCATTER_BUBBLES_SCALING_BY_RADIUS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SCATTER_BUBBLES_SCALING_BY_RADIUS: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_SCATTER_BUBBLES_SCALING_BY_RADIUS', 7 | description: 'Scatter bubbles with radius scaling', 8 | descriptionZh: '以半徑尺寸為比例的散布泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 100, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | MultiValueLegend: { 49 | placement: 'bottom', 50 | padding: 14, 51 | listRectRadius: 7 // 圓型圖例列點 52 | }, 53 | ScatterBubbles: { 54 | arcScaleType: 'radius' 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_SCATTER_BUBBLES_SEPARATE_CATEGORY.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SCATTER_BUBBLES_SEPARATE_CATEGORY: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_SCATTER_BUBBLES_SEPARATE_CATEGORY', 7 | description: 'Scatter bubbles with separate category', 8 | descriptionZh: '分開顯示category的散布泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 100, 44 | left: 80 45 | }, 46 | }, 47 | dataFormatter: { 48 | separateCategory: true, 49 | container: { 50 | columnGap: 100, 51 | rowGap: 70 52 | } 53 | }, 54 | pluginParams: { 55 | MultiValueLegend: { 56 | placement: 'bottom', 57 | padding: 14, 58 | listRectRadius: 7 // 圓型圖例列點 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_SCATTER_BUBBLES_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SCATTER_BUBBLES_SIMPLE: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_SCATTER_BUBBLES_SIMPLE', 7 | description: 'Simple scatter bubbles', 8 | descriptionZh: '簡單的散布泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 60, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | MultiValueLegend: { 49 | placement: 'bottom', 50 | padding: 7, 51 | listRectRadius: 7 // 圓型圖例列點 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/multiValue/PRESET_SCATTER_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SCATTER_SIMPLE: PresetPartial<'multiValue', Partial 5 | & Partial> = { 6 | name: 'PRESET_SCATTER_SIMPLE', 7 | description: 'Simple scatter', 8 | descriptionZh: '簡單散布圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label:[ 13 | "#16B59B", 14 | "#0088FF", 15 | "#FF3232", 16 | "#8E6BC9", 17 | "#904026", 18 | "#E23D93", 19 | "#F38428", 20 | "#6BDC51", 21 | "#C50669", 22 | "#4B25B3" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#7DD3C4", 28 | "#4BABFF", 29 | "#FF6C6C", 30 | "#AA93D2", 31 | "#D58C75", 32 | "#FF8DC8", 33 | "#F9B052", 34 | "#ACE1A0", 35 | "#F35CAA", 36 | "#6F3BD5" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 60, 44 | left: 80 45 | }, 46 | }, 47 | pluginParams: { 48 | MultiValueLegend: { 49 | placement: 'bottom', 50 | padding: 7, 51 | listRectRadius: 7 // 圓型圖例列點 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_BASIC: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_BASIC', 7 | description: 'Basic force directed chart', 8 | descriptionZh: '基本力導向圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | }, 41 | pluginParams: { 42 | ForceDirected: {}, 43 | RelationshipLegend: { 44 | listRectRadius: 7 // 圓型圖例列點 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_BUBBLES_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_BUBBLES_BASIC: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_BUBBLES_BASIC', 7 | description: 'Basic force directed bubbles chart', 8 | descriptionZh: '基本力導向泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | pluginParams: { 42 | ForceDirectedBubbles: {}, 43 | RelationshipLegend: { 44 | listRectRadius: 7 // 圓型圖例列點 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_BUBBLES_FIX_ARROW_WIDTH.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_BUBBLES_FIX_ARROW_WIDTH: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_BUBBLES_FIX_ARROW_WIDTH', 7 | description: 'Force-directed bubble chart with fixed arrow width', 8 | descriptionZh: '固定箭頭寬度的力導向泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | pluginParams: { 42 | ForceDirectedBubbles: { 43 | arrow: { 44 | strokeWidthMin: 1.5, 45 | strokeWidthMax: 1.5 46 | } 47 | }, 48 | RelationshipLegend: { 49 | listRectRadius: 7 // 圓型圖例列點 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_BUBBLES_NONE_ARROW.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_BUBBLES_NONE_ARROW: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_BUBBLES_NONE_ARROW', 7 | description: 'Force-directed bubble chart without arrows', 8 | descriptionZh: '沒有箭頭的力導向泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | pluginParams: { 42 | ForceDirectedBubbles: { 43 | arrow: { 44 | pointerWidth: 0, 45 | pointerHeight: 0, 46 | } 47 | }, 48 | RelationshipLegend: { 49 | listRectRadius: 7 // 圓型圖例列點 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_BUBBLES_NONE_ZOOM.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_BUBBLES_NONE_ZOOM: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_BUBBLES_NONE_ZOOM', 7 | description: 'Force Directed bubbles chart without mouse drag and zoom control', 8 | descriptionZh: '無滑鼠托曳及縮放控制的力導向泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | pluginParams: { 42 | ForceDirectedBubbles: { 43 | zoomable: false, 44 | }, 45 | RelationshipLegend: { 46 | listRectRadius: 7 // 圓型圖例列點 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_BUBBLES_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_BUBBLES_SIMPLE: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_BUBBLES_SIMPLE', 7 | description: 'Simple force directed bubbles chart', 8 | descriptionZh: '簡單力導向泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | pluginParams: { 42 | ForceDirectedBubbles: {}, 43 | RelationshipLegend: { 44 | listRectRadius: 7, // 圓型圖例列點 45 | padding: 7 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_FIX_FONT_SIZE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_FIX_FONT_SIZE: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_FIX_FONT_SIZE', 7 | description: 'Force directed chart with fixed font size', 8 | descriptionZh: '固定字體大小的力導向圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | }, 41 | pluginParams: { 42 | ForceDirected: { 43 | dotLabel: { 44 | sizeFixed: true 45 | }, 46 | arrowLabel: { 47 | sizeFixed: true 48 | } 49 | }, 50 | RelationshipLegend: { 51 | listRectRadius: 7 // 圓型圖例列點 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_NONE_ARROW.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_NONE_ARROW: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_NONE_ARROW', 7 | description: 'Force directed chart without arrows', 8 | descriptionZh: '沒有箭頭的力導向圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | }, 41 | pluginParams: { 42 | ForceDirected: { 43 | arrow: { 44 | pointerWidth: 0, 45 | pointerHeight: 0 46 | } 47 | }, 48 | RelationshipLegend: { 49 | listRectRadius: 7 // 圓型圖例列點 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_NONE_ZOOM.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_NONE_ZOOM: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_NONE_ZOOM', 7 | description: 'Force directed chart without mouse drag and zoom control', 8 | descriptionZh: '無滑鼠托曳及縮放控制的力導向圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | }, 41 | pluginParams: { 42 | ForceDirected: { 43 | zoomable: false, 44 | }, 45 | RelationshipLegend: { 46 | listRectRadius: 7 // 圓型圖例列點 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/PRESET_FORCE_DIRECTED_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetRelationshipPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_FORCE_DIRECTED_SIMPLE: PresetPartial<'relationship', Partial 5 | & Partial> = { 6 | name: 'PRESET_FORCE_DIRECTED_SIMPLE', 7 | description: 'Simple force directed chart', 8 | descriptionZh: '簡單力導向圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF72BB", 15 | "#16B59B", 16 | "#F9B052", 17 | "#6F3BD5", 18 | "#42C724", 19 | "#FF3232", 20 | "#904026", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FFA0A0", 29 | "#7DD3C4", 30 | "#FAC77D", 31 | "#8454D4", 32 | "#42C724", 33 | "#FF6C6C", 34 | "#D4785A", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | }, 41 | pluginParams: { 42 | ForceDirected: {}, 43 | RelationshipLegend: { 44 | listRectRadius: 7, // 圓型圖例列點 45 | padding: 7 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/relationship/index.ts: -------------------------------------------------------------------------------- 1 | export { PRESET_FORCE_DIRECTED_BASIC } from './PRESET_FORCE_DIRECTED_BASIC' 2 | export { PRESET_FORCE_DIRECTED_BUBBLES_BASIC } from './PRESET_FORCE_DIRECTED_BUBBLES_BASIC' 3 | export { PRESET_FORCE_DIRECTED_BUBBLES_FIX_ARROW_WIDTH } from './PRESET_FORCE_DIRECTED_BUBBLES_FIX_ARROW_WIDTH' 4 | export { PRESET_FORCE_DIRECTED_BUBBLES_NONE_ARROW } from './PRESET_FORCE_DIRECTED_BUBBLES_NONE_ARROW' 5 | export { PRESET_FORCE_DIRECTED_BUBBLES_NONE_ZOOM } from './PRESET_FORCE_DIRECTED_BUBBLES_NONE_ZOOM' 6 | export { PRESET_FORCE_DIRECTED_BUBBLES_SIMPLE } from './PRESET_FORCE_DIRECTED_BUBBLES_SIMPLE' 7 | export { PRESET_FORCE_DIRECTED_NONE_ZOOM } from './PRESET_FORCE_DIRECTED_NONE_ZOOM' 8 | export { PRESET_FORCE_DIRECTED_FIX_FONT_SIZE } from './PRESET_FORCE_DIRECTED_FIX_FONT_SIZE' 9 | export { PRESET_FORCE_DIRECTED_NONE_ARROW } from './PRESET_FORCE_DIRECTED_NONE_ARROW' 10 | export { PRESET_FORCE_DIRECTED_SIMPLE } from './PRESET_FORCE_DIRECTED_SIMPLE' -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_BUBBLES_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_BUBBLES_BASIC: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_BUBBLES_BASIC', 7 | description: 'Basic bubble chart', 8 | descriptionZh: '基本泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | pluginParams: { 42 | SeriesLegend: { 43 | listRectRadius: 7 // 圓型圖例列點 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_BUBBLES_SCALING_BY_RADIUS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetBubblesParams, PresetSeriesLegendParams, PresetSeriesTooltipParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_BUBBLES_SCALING_BY_RADIUS: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_BUBBLES_SCALING_BY_RADIUS', 7 | description: 'Bubble chart scaled by radius size', 8 | descriptionZh: '以半徑尺寸為比例的泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | pluginParams: { 42 | Bubbles: { 43 | arcScaleType: 'radius' 44 | }, 45 | SeriesLegend: { 46 | listRectRadius: 7 // 圓型圖例列點 47 | }, 48 | }, 49 | } 50 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_BUBBLES_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_BUBBLES_SIMPLE: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_BUBBLES_SIMPLE', 7 | description: 'Simple bubble chart', 8 | descriptionZh: '簡單泡泡圖', 9 | chartParams: { 10 | padding: { 11 | top: 40, 12 | right: 40, 13 | bottom: 40, 14 | left: 40 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#0088FF", 20 | "#FF3232", 21 | "#38BEA8", 22 | "#6F3BD5", 23 | "#314285", 24 | "#42C724", 25 | "#D52580", 26 | "#F4721B", 27 | "#D117EA", 28 | "#7E7D7D" 29 | ], 30 | }, 31 | dark: { 32 | label: [ 33 | "#4BABFF", 34 | "#FF6C6C", 35 | "#7DD3C4", 36 | "#8E6BC9", 37 | "#5366AC", 38 | "#86DC72", 39 | "#FF72BB", 40 | "#F9B052", 41 | "#EF76FF", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | pluginParams: { 48 | SeriesLegend: { 49 | listRectRadius: 7, // 圓型圖例列點 50 | padding: 7 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_BUBBLES_SUM_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_BUBBLES_SUM_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_BUBBLES_SUM_SERIES', 7 | description: 'Bubble chart of combined Series data', 8 | descriptionZh: '合併Series資料的泡泡圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value, 43 | sumSeries: true 44 | }, 45 | pluginParams: { 46 | } 47 | } 48 | PRESET_BUBBLES_SUM_SERIES.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` 49 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_PIE_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetSeriesTooltipParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_PIE_BASIC: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_PIE_BASIC', 7 | description: 'Basic pie chart', 8 | descriptionZh: '基本圓餅圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#4BABFF", 15 | "#38BEA8", 16 | "#86DC72", 17 | "#F9B052", 18 | "#F4721B", 19 | "#FF3232", 20 | "#5F2714", 21 | "#D117EA", 22 | "7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#8BC8FF", 29 | "#61CBB9", 30 | "#ACE1A0", 31 | "#FCDCAD", 32 | "#F9B052", 33 | "#FF6C6C", 34 | "#904026", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value 43 | }, 44 | pluginParams: { 45 | SeriesLegend: { 46 | listRectRadius: 7 // 圓型圖例列點 47 | } 48 | } 49 | } 50 | PRESET_PIE_BASIC.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_PIE_DONUT.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_PIE_DONUT: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_PIE_DONUT', 7 | description: 'Donut chart', 8 | descriptionZh: '甜甜圈圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#4BABFF", 15 | "#38BEA8", 16 | "#86DC72", 17 | "#F9B052", 18 | "#F4721B", 19 | "#FF3232", 20 | "#5F2714", 21 | "#D117EA", 22 | "7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#8BC8FF", 29 | "#61CBB9", 30 | "#ACE1A0", 31 | "#FCDCAD", 32 | "#F9B052", 33 | "#FF6C6C", 34 | "#904026", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value 43 | }, 44 | pluginParams: { 45 | Pie: { 46 | innerRadius: 0.5 47 | }, 48 | PieLabels: {}, 49 | PieEventTexts: {}, 50 | SeriesLegend: { 51 | listRectRadius: 7 // 圓型圖例列點 52 | } 53 | } 54 | } 55 | PRESET_PIE_DONUT.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_PIE_SEPARATE_LABEL.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_PIE_SEPARATE_LABEL: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_PIE_SEPARATE_LABEL', 7 | description: 'Separate pie chart of Label', 8 | descriptionZh: '分開顯示Label的圓餅圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#4BABFF", 15 | "#38BEA8", 16 | "#86DC72", 17 | "#F9B052", 18 | "#F4721B", 19 | "#FF3232", 20 | "#5F2714", 21 | "#D117EA", 22 | "7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#8BC8FF", 29 | "#61CBB9", 30 | "#ACE1A0", 31 | "#FCDCAD", 32 | "#F9B052", 33 | "#FF6C6C", 34 | "#904026", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value, 43 | separateLabel: true, 44 | }, 45 | pluginParams: { 46 | PieLabels: { 47 | } 48 | } 49 | } 50 | PRESET_PIE_SEPARATE_LABEL.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` 51 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_PIE_SEPARATE_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_PIE_SEPARATE_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_PIE_SEPARATE_SERIES', 7 | description: 'Separate pie chart of Series', 8 | descriptionZh: '分開顯示Series的圓餅圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#4BABFF", 15 | "#38BEA8", 16 | "#86DC72", 17 | "#F9B052", 18 | "#F4721B", 19 | "#FF3232", 20 | "#5F2714", 21 | "#D117EA", 22 | "7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#8BC8FF", 29 | "#61CBB9", 30 | "#ACE1A0", 31 | "#FCDCAD", 32 | "#F9B052", 33 | "#FF6C6C", 34 | "#904026", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value, 43 | separateSeries: true, 44 | }, 45 | pluginParams: { 46 | } 47 | } 48 | PRESET_PIE_SEPARATE_SERIES.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_PIE_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetSeriesTooltipParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_PIE_SIMPLE: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_PIE_SIMPLE', 7 | description: 'Simple pie chart', 8 | descriptionZh: '簡單圓餅圖', 9 | chartParams: { 10 | padding: { 11 | top: 30, 12 | right: 30, 13 | bottom: 30, 14 | left: 30 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#0088FF", 20 | "#4BABFF", 21 | "#38BEA8", 22 | "#86DC72", 23 | "#F9B052", 24 | "#F4721B", 25 | "#FF3232", 26 | "#5F2714", 27 | "#D117EA", 28 | "7E7D7D" 29 | ], 30 | }, 31 | dark: { 32 | label: [ 33 | "#4BABFF", 34 | "#8BC8FF", 35 | "#61CBB9", 36 | "#ACE1A0", 37 | "#FCDCAD", 38 | "#F9B052", 39 | "#FF6C6C", 40 | "#904026", 41 | "#EF76FF", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | dataFormatter: { 48 | sort: (a, b) => b.value - a.value 49 | }, 50 | pluginParams: { 51 | SeriesLegend: { 52 | listRectRadius: 7, // 圓型圖例列點 53 | padding: 7 54 | } 55 | } 56 | } 57 | PRESET_PIE_SIMPLE.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_PIE_SUM_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_PIE_SUM_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_PIE_SUM_SERIES', 7 | description: 'Pie chart of combined Series data', 8 | descriptionZh: '合併Series資料的圓餅圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#4BABFF", 15 | "#38BEA8", 16 | "#86DC72", 17 | "#F9B052", 18 | "#F4721B", 19 | "#FF3232", 20 | "#5F2714", 21 | "#D117EA", 22 | "7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#8BC8FF", 29 | "#61CBB9", 30 | "#ACE1A0", 31 | "#FCDCAD", 32 | "#F9B052", 33 | "#FF6C6C", 34 | "#904026", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | }, 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value, 43 | sumSeries: true 44 | }, 45 | pluginParams: { 46 | } 47 | } 48 | PRESET_PIE_SUM_SERIES.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` 49 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_PIE_WITH_INNER_LABELS.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_PIE_WITH_INNER_LABELS: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_PIE_WITH_INNER_LABELS', 7 | description: 'Pie chart with inner data labels', 8 | descriptionZh: '圓餅圖及內部資料標籤', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#4BABFF", 15 | "#38BEA8", 16 | "#86DC72", 17 | "#F9B052", 18 | "#F4721B", 19 | "#FF3232", 20 | "#5F2714", 21 | "#D117EA", 22 | "7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#8BC8FF", 29 | "#61CBB9", 30 | "#ACE1A0", 31 | "#FCDCAD", 32 | "#F9B052", 33 | "#FF6C6C", 34 | "#904026", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value 43 | }, 44 | pluginParams: { 45 | Pie: {}, 46 | PieLabels: { 47 | "labelCentroid": 1.3, // 圖內資料標籤 48 | "labelColorType": "labelContrast" 49 | }, 50 | PieEventTexts: {}, 51 | SeriesLegend: { 52 | listRectRadius: 7 // 圓型圖例列點 53 | } 54 | } 55 | } 56 | PRESET_PIE_WITH_INNER_LABELS.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_ROSE_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ROSE_BASIC: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_ROSE_BASIC', 7 | description: 'Basic Rose chart', 8 | descriptionZh: '基本Rose參數', 9 | chartParams: { 10 | padding: { 11 | top: 40, 12 | right: 40, 13 | bottom: 40, 14 | left: 40 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#4BABFF", 20 | "#0088FF", 21 | "#435399", 22 | "#86DC72", 23 | "#42C724", 24 | "#16B59B", 25 | "#F9B052", 26 | "#F4721B", 27 | "#FF3232", 28 | "#7E7D7D" 29 | ] 30 | }, 31 | dark: { 32 | label: [ 33 | "#8BC8FF", 34 | "#4BABFF", 35 | "#0088FF", 36 | "#55D339", 37 | "#29AB0C", 38 | "#16B59B", 39 | "#FCDCAD", 40 | "#F9B052", 41 | "#FF6C6C", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | dataFormatter: { 48 | sort: (a, b) => b.value - a.value 49 | }, 50 | pluginParams: { 51 | SeriesLegend: { 52 | listRectRadius: 7 // 圓型圖例列點 53 | } 54 | } 55 | } 56 | PRESET_ROSE_BASIC.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_ROSE_SEPARATE_ALL.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ROSE_SEPARATE_ALL: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_ROSE_SEPARATE_ALL', 7 | description: 'Separate rose chart of all data', 8 | descriptionZh: '全部資料分開顯示的玫瑰圖', 9 | chartParams: { 10 | padding: { 11 | top: 40, 12 | right: 40, 13 | bottom: 40, 14 | left: 40 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#4BABFF", 20 | "#0088FF", 21 | "#435399", 22 | "#86DC72", 23 | "#42C724", 24 | "#16B59B", 25 | "#F9B052", 26 | "#F4721B", 27 | "#FF3232", 28 | "#7E7D7D" 29 | ] 30 | }, 31 | dark: { 32 | label: [ 33 | "#8BC8FF", 34 | "#4BABFF", 35 | "#0088FF", 36 | "#55D339", 37 | "#29AB0C", 38 | "#16B59B", 39 | "#FCDCAD", 40 | "#F9B052", 41 | "#FF6C6C", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | dataFormatter: { 48 | sort: (a, b) => b.value - a.value, 49 | separateLabel: true, 50 | separateSeries: true, 51 | }, 52 | pluginParams: { 53 | } 54 | } 55 | PRESET_ROSE_SEPARATE_ALL.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_ROSE_SEPARATE_LABEL.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ROSE_SEPARATE_LABEL: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_ROSE_SEPARATE_LABEL', 7 | description: 'Separate rose chart of Label', 8 | descriptionZh: '分開顯示Label的玫瑰圖', 9 | chartParams: { 10 | padding: { 11 | top: 40, 12 | right: 40, 13 | bottom: 40, 14 | left: 40 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#4BABFF", 20 | "#0088FF", 21 | "#435399", 22 | "#86DC72", 23 | "#42C724", 24 | "#16B59B", 25 | "#F9B052", 26 | "#F4721B", 27 | "#FF3232", 28 | "#7E7D7D" 29 | ] 30 | }, 31 | dark: { 32 | label: [ 33 | "#8BC8FF", 34 | "#4BABFF", 35 | "#0088FF", 36 | "#55D339", 37 | "#29AB0C", 38 | "#16B59B", 39 | "#FCDCAD", 40 | "#F9B052", 41 | "#FF6C6C", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | dataFormatter: { 48 | sort: (a, b) => b.value - a.value, 49 | separateLabel: true, 50 | }, 51 | pluginParams: { 52 | RoseLabels: { 53 | } 54 | } 55 | } 56 | PRESET_ROSE_SEPARATE_LABEL.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` 57 | 58 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_ROSE_SEPARATE_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ROSE_SEPARATE_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_ROSE_SEPARATE_SERIES', 7 | description: 'Separate rose chart of Series', 8 | descriptionZh: '分開顯示Series的玫瑰圖', 9 | chartParams: { 10 | padding: { 11 | top: 40, 12 | right: 40, 13 | bottom: 40, 14 | left: 40 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#4BABFF", 20 | "#0088FF", 21 | "#435399", 22 | "#86DC72", 23 | "#42C724", 24 | "#16B59B", 25 | "#F9B052", 26 | "#F4721B", 27 | "#FF3232", 28 | "#7E7D7D" 29 | ] 30 | }, 31 | dark: { 32 | label: [ 33 | "#8BC8FF", 34 | "#4BABFF", 35 | "#0088FF", 36 | "#55D339", 37 | "#29AB0C", 38 | "#16B59B", 39 | "#FCDCAD", 40 | "#F9B052", 41 | "#FF6C6C", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | dataFormatter: { 48 | sort: (a, b) => b.value - a.value, 49 | separateSeries: true, 50 | }, 51 | pluginParams: { 52 | } 53 | } 54 | PRESET_ROSE_SEPARATE_SERIES.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_ROSE_SEPARATE_SERIES_AND_SUM_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ROSE_SEPARATE_SERIES_AND_SUM_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_ROSE_SEPARATE_SERIES_AND_SUM_SERIES', 7 | description: 'Separate and sum Series data', 8 | descriptionZh: '分開顯示Series並合併Series資料', 9 | chartParams: { 10 | padding: { 11 | top: 40, 12 | right: 40, 13 | bottom: 40, 14 | left: 40 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#4BABFF", 20 | "#0088FF", 21 | "#435399", 22 | "#86DC72", 23 | "#42C724", 24 | "#16B59B", 25 | "#F9B052", 26 | "#F4721B", 27 | "#FF3232", 28 | "#7E7D7D" 29 | ] 30 | }, 31 | dark: { 32 | label: [ 33 | "#8BC8FF", 34 | "#4BABFF", 35 | "#0088FF", 36 | "#55D339", 37 | "#29AB0C", 38 | "#16B59B", 39 | "#FCDCAD", 40 | "#F9B052", 41 | "#FF6C6C", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | dataFormatter: { 48 | sort: (a, b) => b.value - a.value, 49 | separateSeries: true, 50 | sumSeries: true, 51 | }, 52 | pluginParams: { 53 | } 54 | } 55 | PRESET_ROSE_SEPARATE_SERIES_AND_SUM_SERIES.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_ROSE_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ROSE_SIMPLE: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_ROSE_SIMPLE', 7 | description: 'Simple Rose chart', 8 | descriptionZh: '簡單Rose參數', 9 | chartParams: { 10 | padding: { 11 | top: 20, 12 | right: 20, 13 | bottom: 20, 14 | left: 20 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#4BABFF", 20 | "#0088FF", 21 | "#435399", 22 | "#86DC72", 23 | "#42C724", 24 | "#16B59B", 25 | "#F9B052", 26 | "#F4721B", 27 | "#FF3232", 28 | "#7E7D7D" 29 | ] 30 | }, 31 | dark: { 32 | label: [ 33 | "#8BC8FF", 34 | "#4BABFF", 35 | "#0088FF", 36 | "#55D339", 37 | "#29AB0C", 38 | "#16B59B", 39 | "#FCDCAD", 40 | "#F9B052", 41 | "#FF6C6C", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | dataFormatter: { 48 | sort: (a, b) => b.value - a.value 49 | }, 50 | pluginParams: { 51 | SeriesLegend: { 52 | listRectRadius: 7, // 圓型圖例列點 53 | padding: 7 54 | } 55 | } 56 | } 57 | PRESET_ROSE_SIMPLE.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_ROSE_SUM_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_ROSE_SUM_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_ROSE_SUM_SERIES', 7 | description: 'Rose chart of combined Series data', 8 | descriptionZh: '合併Series資料的玫瑰圖', 9 | chartParams: { 10 | padding: { 11 | top: 40, 12 | right: 40, 13 | bottom: 40, 14 | left: 40 15 | }, 16 | colors: { 17 | light: { 18 | label: [ 19 | "#4BABFF", 20 | "#0088FF", 21 | "#435399", 22 | "#86DC72", 23 | "#42C724", 24 | "#16B59B", 25 | "#F9B052", 26 | "#F4721B", 27 | "#FF3232", 28 | "#7E7D7D" 29 | ] 30 | }, 31 | dark: { 32 | label: [ 33 | "#8BC8FF", 34 | "#4BABFF", 35 | "#0088FF", 36 | "#55D339", 37 | "#29AB0C", 38 | "#16B59B", 39 | "#FCDCAD", 40 | "#F9B052", 41 | "#FF6C6C", 42 | "#C4C4C4" 43 | ] 44 | } 45 | } 46 | }, 47 | dataFormatter: { 48 | sort: (a, b) => b.value - a.value, 49 | sumSeries: true 50 | }, 51 | pluginParams: { 52 | } 53 | } 54 | PRESET_ROSE_SUM_SERIES.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` 55 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_SERIES_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SERIES_BASIC: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_SERIES_BASIC', 7 | description: 'Basic Series parameters', 8 | descriptionZh: '基本Series參數', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | pluginParams: { 42 | SeriesLegend: { 43 | listRectRadius: 7 // 圓型圖例列點 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_SERIES_SEPARATE_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SERIES_SEPARATE_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_SERIES_SEPARATE_SERIES', 7 | description: 'Separate Series', 8 | descriptionZh: '分開顯示Series', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value, 43 | separateSeries: true, 44 | }, 45 | pluginParams: { 46 | } 47 | } 48 | PRESET_SERIES_SEPARATE_SERIES.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_SERIES_SEPARATE_SERIES_AND_SUM_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SERIES_SEPARATE_SERIES_AND_SUM_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_SERIES_SEPARATE_SERIES_AND_SUM_SERIES', 7 | description: 'Separate and sum Series data', 8 | descriptionZh: '分開顯示Series並合併Series資料', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value, 43 | separateSeries: true, 44 | sumSeries: true, 45 | }, 46 | pluginParams: { 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/series/PRESET_SERIES_SUM_SERIES.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetSeriesPluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_SERIES_SUM_SERIES: PresetPartial<'series', Partial 5 | & Partial> = { 6 | name: 'PRESET_SERIES_SUM_SERIES', 7 | description: 'Combine Series data', 8 | descriptionZh: '合併Series資料', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#FF3232", 15 | "#38BEA8", 16 | "#6F3BD5", 17 | "#314285", 18 | "#42C724", 19 | "#D52580", 20 | "#F4721B", 21 | "#D117EA", 22 | "#7E7D7D" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#FF6C6C", 29 | "#7DD3C4", 30 | "#8E6BC9", 31 | "#5366AC", 32 | "#86DC72", 33 | "#FF72BB", 34 | "#F9B052", 35 | "#EF76FF", 36 | "#C4C4C4" 37 | ] 38 | } 39 | } 40 | }, 41 | dataFormatter: { 42 | sort: (a, b) => b.value - a.value, 43 | sumSeries: true 44 | }, 45 | pluginParams: { 46 | 47 | } 48 | } 49 | PRESET_SERIES_SUM_SERIES.dataFormatter.sort.toString = () => `(a, b) => b.value - a.value` 50 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/tree/PRESET_TREE_MAP_BASIC.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetTreePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_TREE_MAP_BASIC: PresetPartial<'tree', Partial 5 | & Partial> = { 6 | name: 'PRESET_TREE_MAP_BASIC', 7 | description: 'Basic tree map', 8 | descriptionZh: '基本樹狀矩形圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 70, 44 | left: 40 45 | }, 46 | }, 47 | pluginParams: { 48 | TreeMap: {}, 49 | TreeLegend: { 50 | placement: 'bottom', 51 | padding: 14, 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/tree/PRESET_TREE_MAP_SIMPLE.ts: -------------------------------------------------------------------------------- 1 | import type { PresetPartial } from '../../lib/core-types' 2 | import type { PresetTreePluginParams, PresetNoneDataPluginParams } from '../types' 3 | 4 | export const PRESET_TREE_MAP_SIMPLE: PresetPartial<'tree', Partial 5 | & Partial> = { 6 | name: 'PRESET_TREE_MAP_SIMPLE', 7 | description: 'Simple tree map', 8 | descriptionZh: '簡單樹狀矩形圖', 9 | chartParams: { 10 | colors: { 11 | light: { 12 | label: [ 13 | "#0088FF", 14 | "#16B59B", 15 | "#6F3BD5", 16 | "#EE5F13", 17 | "#F9B052", 18 | "#D4785A", 19 | "#42C724", 20 | "#FF4B4B", 21 | "#1F3172", 22 | "#E23D93" 23 | ], 24 | }, 25 | dark: { 26 | label: [ 27 | "#4BABFF", 28 | "#7DD3C4", 29 | "#8454D4", 30 | "#FF6C6C", 31 | "#FAC77D", 32 | "#D58C75", 33 | "#42C724", 34 | "#FF8B8B", 35 | "#5366AC", 36 | "#FF8DC8" 37 | ] 38 | } 39 | }, 40 | padding: { 41 | top: 40, 42 | right: 40, 43 | bottom: 40, 44 | left: 40 45 | }, 46 | }, 47 | pluginParams: { 48 | TreeMap: {}, 49 | TreeLegend: { 50 | placement: 'bottom', 51 | padding: 7, 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/src/tree/index.ts: -------------------------------------------------------------------------------- 1 | export { PRESET_TREE_MAP_BASIC } from './PRESET_TREE_MAP_BASIC' 2 | export { PRESET_TREE_MAP_SIMPLE } from './PRESET_TREE_MAP_SIMPLE' -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports" : true, 12 | "esModuleInterop" : true 13 | } 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json" 3 | } -------------------------------------------------------------------------------- /packages/orbcharts-presets-basic/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import dts from 'vite-plugin-dts' 3 | 4 | export default defineConfig(({ command, mode }) => { 5 | return { 6 | plugins: [ 7 | dts({ 8 | insertTypesEntry: true 9 | }) 10 | ], 11 | compilerOptions: { 12 | composite: true 13 | }, 14 | build: { 15 | lib: { 16 | entry: "src/index.ts", 17 | name: 'orbcharts-presets-basic', 18 | formats: ["es", "umd"], 19 | fileName: format => `orbcharts-presets-basic.${format}.js` 20 | }, 21 | } 22 | } 23 | }) -------------------------------------------------------------------------------- /packages/orbcharts-test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orbcharts/test", 3 | "version": "3.0.3-beta.1", 4 | "description": "OrbCharts is a data-driven Javascript chart library", 5 | "author": "Blue Planet Inc.", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "d3", 9 | "rxjs", 10 | "svg", 11 | "visualization", 12 | "infographic", 13 | "graph", 14 | "chart" 15 | ], 16 | "private": false, 17 | "publishConfig": { 18 | "access": "public", 19 | "registry": "https://registry.npmjs.org/" 20 | }, 21 | "files": [ 22 | "*" 23 | ], 24 | "main": "./dist/orbcharts-test.umd.js", 25 | "module": "./dist/orbcharts-test.es.js", 26 | "types": "./dist/src/index.d.ts", 27 | "unpkg": "./dist/orbcharts-test.umd.js", 28 | "jsdelivr": "./dist/orbcharts-test.umd.js", 29 | "scripts": { 30 | "test": "echo \"Error: no test specified\" && exit 1", 31 | "build": "vite build --mode production" 32 | }, 33 | "devDependencies": { 34 | "@types/d3": "^7.4.0", 35 | "ts-loader": "^9.4.2", 36 | "typescript": "^5.0.4", 37 | "vite": "^5.3.5", 38 | "vite-plugin-dts": "^3.7.3" 39 | }, 40 | "dependencies": { 41 | "@orbcharts/core": "^3.0.4", 42 | "@orbcharts/core-types": "^3.0.2", 43 | "@orbcharts/plugins-basic": "^3.0.4", 44 | "@orbcharts/plugins-basic-types": "^3.0.2", 45 | "@orbcharts/presets-basic": "^3.0.2", 46 | "d3": "^7.8.5", 47 | "rxjs": "^7.8.1" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/orbcharts-test/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@orbcharts/core' 2 | export * from '@orbcharts/core-types' 3 | export * from '@orbcharts/plugins-basic' 4 | export * from '@orbcharts/plugins-basic-types' 5 | export * from '@orbcharts/presets-basic' 6 | -------------------------------------------------------------------------------- /packages/orbcharts-test/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports" : true, 12 | "esModuleInterop" : true 13 | } 14 | } -------------------------------------------------------------------------------- /packages/orbcharts-test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json" 3 | } -------------------------------------------------------------------------------- /packages/orbcharts-test/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import dts from 'vite-plugin-dts' 3 | 4 | export default defineConfig(({ command, mode }) => { 5 | return { 6 | plugins: [ 7 | dts({ 8 | insertTypesEntry: true 9 | }) 10 | ], 11 | compilerOptions: { 12 | composite: true 13 | }, 14 | build: { 15 | lib: { 16 | entry: "src/index.ts", 17 | name: 'orbcharts-test', 18 | formats: ["es", "umd"], 19 | fileName: format => `orbcharts-test.${format}.js` 20 | }, 21 | } 22 | } 23 | }) -------------------------------------------------------------------------------- /packages/orbcharts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "orbcharts", 3 | "version": "3.0.9", 4 | "description": "OrbCharts is a data-driven Javascript chart library", 5 | "author": "Blue Planet Inc.", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "d3", 9 | "rxjs", 10 | "typescript", 11 | "svg", 12 | "visualization", 13 | "infographic", 14 | "graph", 15 | "chart" 16 | ], 17 | "private": false, 18 | "publishConfig": { 19 | "access": "public", 20 | "registry": "https://registry.npmjs.org/" 21 | }, 22 | "files": [ 23 | "*" 24 | ], 25 | "main": "./dist/orbcharts.umd.js", 26 | "module": "./dist/orbcharts.es.js", 27 | "types": "./dist/src/index.d.ts", 28 | "unpkg": "./dist/orbcharts.umd.js", 29 | "jsdelivr": "./dist/orbcharts.umd.js", 30 | "scripts": { 31 | "test": "echo \"Error: no test specified\" && exit 1", 32 | "build": "vite build --mode production" 33 | }, 34 | "devDependencies": { 35 | "@types/d3": "^7.4.0", 36 | "ts-loader": "^9.4.2", 37 | "typescript": "^5.0.4", 38 | "vite": "^5.3.5", 39 | "vite-plugin-dts": "^3.7.3" 40 | }, 41 | "dependencies": { 42 | "@orbcharts/core": "^3.0.6", 43 | "@orbcharts/core-types": "^3.0.4", 44 | "@orbcharts/plugins-basic": "^3.0.8", 45 | "@orbcharts/plugins-basic-types": "^3.0.3", 46 | "@orbcharts/presets-basic": "^3.0.5", 47 | "d3": "^7.8.5", 48 | "rxjs": "^7.8.1" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /packages/orbcharts/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@orbcharts/core' 2 | export * from '@orbcharts/core-types' 3 | export * from '@orbcharts/plugins-basic' 4 | export * from '@orbcharts/plugins-basic-types' 5 | export * from '@orbcharts/presets-basic' 6 | -------------------------------------------------------------------------------- /packages/orbcharts/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "jsx": "react", 9 | "allowJs": true, 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports" : true, 12 | "esModuleInterop" : true 13 | } 14 | } -------------------------------------------------------------------------------- /packages/orbcharts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json" 3 | } -------------------------------------------------------------------------------- /packages/orbcharts/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import dts from 'vite-plugin-dts' 3 | 4 | export default defineConfig(({ command, mode }) => { 5 | return { 6 | plugins: [ 7 | dts({ 8 | insertTypesEntry: true 9 | }) 10 | ], 11 | compilerOptions: { 12 | composite: true 13 | }, 14 | build: { 15 | lib: { 16 | entry: "src/index.ts", 17 | name: 'orbcharts', 18 | formats: ["es", "umd"], 19 | fileName: format => `orbcharts.${format}.js` 20 | }, 21 | } 22 | } 23 | }) --------------------------------------------------------------------------------