From ec2bb22357e82c102e7cbaae201d78b535b3d560 Mon Sep 17 00:00:00 2001 From: Xiao Gui Date: Fri, 17 Jan 2020 11:18:29 +0100 Subject: [PATCH] chore: darkmode --- deploy/package.json | 3 +- package.json | 9 +- src/components.d.ts | 4 + .../kg-dataset-previewer-charts/chart.tsx | 22 +++- .../kg-dataset-previewer-charts/readme.md | 7 +- .../kg-dataset-previewer.tsx | 17 ++- src/components/kg-dataset-previewer/readme.md | 13 ++- src/index.html | 80 +++++++++---- src/utils/renderUtil.tsx | 3 +- src/utils/utils.ts | 105 +++++++++++++++++- stencil.config.ts | 6 + 11 files changed, 227 insertions(+), 42 deletions(-) diff --git a/deploy/package.json b/deploy/package.json index 5ab3506..7fb1452 100644 --- a/deploy/package.json +++ b/deploy/package.json @@ -12,5 +12,6 @@ "dependencies": { "cors": "^2.8.5", "express": "^4.17.1" - } + }, + "devDependencies": {} } diff --git a/package.json b/package.json index 2de458a..b8699e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kg-dataset-previewer", - "version": "0.0.5", + "version": "0.0.6", "description": "Preview a few manually curated datasets.", "main": "dist/index.js", "module": "dist/index.mjs", @@ -17,15 +17,18 @@ ], "scripts": { "build": "stencil build --docs", - "start": "stencil build --dev --watch --serve", + "start": "KG_DATASET_PREVIEWER_BACKEND_URL=http://localhost:1234/datasetPreview stencil build --dev --watch --serve", "test": "stencil test --spec --e2e", "test.watch": "stencil test --spec --e2e --watchAll", "generate": "stencil generate" }, "devDependencies": { + "@rollup/plugin-replace": "^2.3.0", "@stencil/core": "^1.8.3", "@types/chart.js": "^2.9.8", + "@types/node": "^13.1.7", "chart.js": "^2.9.3" }, - "license": "MIT" + "license": "MIT", + "dependencies": {} } diff --git a/src/components.d.ts b/src/components.d.ts index 4849cb3..ade8bc8 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -19,11 +19,13 @@ export namespace Components { } interface KgDatasetPreviewer { 'backendUrl': string; + 'darkmode': boolean; 'filename': string; 'kgId': string; 'kgSchema': string; } interface KgDatasetPreviewerChart { + 'darkmode': boolean; 'dataProp': string; } } @@ -65,11 +67,13 @@ declare namespace LocalJSX { } interface KgDatasetPreviewer { 'backendUrl'?: string; + 'darkmode'?: boolean; 'filename'?: string; 'kgId'?: string; 'kgSchema'?: string; } interface KgDatasetPreviewerChart { + 'darkmode'?: boolean; 'dataProp'?: string; } diff --git a/src/components/kg-dataset-previewer-charts/chart.tsx b/src/components/kg-dataset-previewer-charts/chart.tsx index 7a9bc8f..7958ca1 100644 --- a/src/components/kg-dataset-previewer-charts/chart.tsx +++ b/src/components/kg-dataset-previewer-charts/chart.tsx @@ -1,7 +1,7 @@ import { h, Component, Prop, Element, Watch, State } from '@stencil/core' import { ChartConfiguration } from 'chart.js' import Chart from 'chart.js' -import { patchChartJsRadar } from '../../utils/utils' +import { patchChartJsRadar, getPatchChartJsOption } from '../../utils/utils' interface PreviewData{ "chart.js": ChartConfiguration @@ -18,6 +18,11 @@ export class KgPreviewChart{ mutable: false }) dataProp: string + @Prop({ + reflect: true, + attribute: 'kg-ds-prv-darkmode' + }) darkmode: boolean = false + data: PreviewData @Watch('dataProp') @@ -27,6 +32,13 @@ export class KgPreviewChart{ @State() chartjsDataProvided: boolean = true + @State() patchChartjsOptions = getPatchChartJsOption({ darkmode: this.darkmode }) + + @Watch('darkmode') + setPatchChartJsOption(){ + this.patchChartjsOptions = getPatchChartJsOption({ darkmode: this.darkmode }) + } + @Element() el: HTMLElement canvas: HTMLCanvasElement @@ -53,7 +65,6 @@ export class KgPreviewChart{ const { width, height } = this.getHostElementInfo() this.canvas.width = width this.canvas.height = height - } protected renderChart():void{ @@ -61,7 +72,11 @@ export class KgPreviewChart{ return } - this.chart = new Chart(this.canvas, this.data['chart.js']) + const copiedConfiguration = JSON.parse(JSON.stringify(this.data['chart.js'])) + + const chartConfiguration = this.patchChartjsOptions(copiedConfiguration) + + this.chart = new Chart(this.canvas, chartConfiguration) } protected setConfigData(){ @@ -71,6 +86,7 @@ export class KgPreviewChart{ protected componentDidUpdate():void{ this.attachChartjs() + this.setConfigData() } protected componentDidLoad():void{ diff --git a/src/components/kg-dataset-previewer-charts/readme.md b/src/components/kg-dataset-previewer-charts/readme.md index d4429a5..cd6438e 100644 --- a/src/components/kg-dataset-previewer-charts/readme.md +++ b/src/components/kg-dataset-previewer-charts/readme.md @@ -7,9 +7,10 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ------------------------ | ----------- | -------- | ----------- | -| `dataProp` | `kg-ds-prv-chartjs-data` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------- | ------------------------ | ----------- | --------- | ----------- | +| `darkmode` | `kg-ds-prv-darkmode` | | `boolean` | `false` | +| `dataProp` | `kg-ds-prv-chartjs-data` | | `string` | `undefined` | ## Dependencies diff --git a/src/components/kg-dataset-previewer/kg-dataset-previewer.tsx b/src/components/kg-dataset-previewer/kg-dataset-previewer.tsx index e530891..2f3277e 100644 --- a/src/components/kg-dataset-previewer/kg-dataset-previewer.tsx +++ b/src/components/kg-dataset-previewer/kg-dataset-previewer.tsx @@ -9,25 +9,40 @@ import { IDatasetFile, getRenderFunction, prependUrl } from '../../utils/renderU export class KgDatasetPreviewer { @Prop({ + reflect: true, attribute: `kg-ds-prv-kg-schema` }) kgSchema: string = `minds/core/dataset/v1.0.0`; @Prop({ + reflect: true, attribute: `kg-ds-prv-kg-id` }) kgId: string; @Prop({ + reflect: true, attribute: `kg-ds-prv-backend-url` }) backendUrl: string = KG_DATASET_PREVIEWER_BACKEND_URL; @Prop({ + reflect: true, attribute: 'kg-ds-prv-filename' }) filename: string + @Prop({ + reflect: true, + attribute: `kg-ds-prv-darkmode` + }) darkmode: boolean = false + loadingFlag: boolean = false error: string @State() displayFile: IDatasetFile - @State() renderFn: Function = getRenderFunction() + @State() renderFn: Function = getRenderFunction({ darkmode: this.darkmode }) + + + @Watch('darkmode') + setNewRenderRn(){ + this.renderFn = getRenderFunction({ darkmode: this.darkmode }) + } @Watch('kgId') @Watch('filename') diff --git a/src/components/kg-dataset-previewer/readme.md b/src/components/kg-dataset-previewer/readme.md index 134efda..1d56f11 100644 --- a/src/components/kg-dataset-previewer/readme.md +++ b/src/components/kg-dataset-previewer/readme.md @@ -7,12 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------ | ----------------------- | ----------- | -------- | ---------------------------------- | -| `backendUrl` | `kg-ds-prv-backend-url` | | `string` | `KG_DATASET_PREVIEWER_BACKEND_URL` | -| `filename` | `kg-ds-prv-filename` | | `string` | `undefined` | -| `kgId` | `kg-ds-prv-kg-id` | | `string` | `undefined` | -| `kgSchema` | `kg-ds-prv-kg-schema` | | `string` | ``minds/core/dataset/v1.0.0`` | +| Property | Attribute | Description | Type | Default | +| ------------ | ----------------------- | ----------- | --------- | ---------------------------------- | +| `backendUrl` | `kg-ds-prv-backend-url` | | `string` | `KG_DATASET_PREVIEWER_BACKEND_URL` | +| `darkmode` | `kg-ds-prv-darkmode` | | `boolean` | `false` | +| `filename` | `kg-ds-prv-filename` | | `string` | `undefined` | +| `kgId` | `kg-ds-prv-kg-id` | | `string` | `undefined` | +| `kgSchema` | `kg-ds-prv-kg-schema` | | `string` | ``minds/core/dataset/v1.0.0`` | ## Dependencies diff --git a/src/index.html b/src/index.html index e4bd4fd..218a269 100644 --- a/src/index.html +++ b/src/index.html @@ -7,30 +7,70 @@ + - - + - +
+ + + + + + + + + + + +
- - - - - - + diff --git a/src/utils/renderUtil.tsx b/src/utils/renderUtil.tsx index 0c239ce..f4f4020 100644 --- a/src/utils/renderUtil.tsx +++ b/src/utils/renderUtil.tsx @@ -19,7 +19,7 @@ export function getRenderList({ containerClass, itemClass } = { itemClass: '', c } // TODO check for XSS -export function getRenderFunction({ itemClass } = { itemClass: '' }){ +export function getRenderFunction({ itemClass, darkmode = false }: {itemClass?: string, darkmode?: boolean} = { itemClass: '', darkmode: false }){ return function renderDatasetPreview(datafile: IDatasetFile){ const { mimetype, url, data } = datafile switch (mimetype){ @@ -31,6 +31,7 @@ export function getRenderFunction({ itemClass } = { itemClass: '' }){ } case MIME_TYPE.JSON: { return diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 2972cdc..ab86412 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,6 +1,7 @@ -import Chart from 'chart.js' +import Chart, { ChartConfiguration, ChartOptions } from 'chart.js' -export const KG_DATASET_PREVIEWER_BACKEND_URL = `http://localhost:1234/datasetPreview` +// managed by replace plugin +export const KG_DATASET_PREVIEWER_BACKEND_URL = `__BACKEND_URL__` export const KG_DATASET_PREFIX = `kg-ds-prv` export function getKgInfo({ kgId, backendUrl }) { @@ -15,16 +16,29 @@ export const MIME_TYPE = { const KG_PREVIEW_DS_PATCH_CHARTJS = Symbol(`KG_PREVIEW_DS_PATCH_CHARTJS`) +const chartCommon = { + pointRadius : 0 +} + const chartSdStyle = { fill : false, backgroundColor : 'rgba(0,0,0,0)', + borderColor: `rgba(128, 128, 128, 0.2)`, borderDash : [10, 3], pointRadius : 0, pointHitRadius : 0, + ...chartCommon } const chartBaseStyle = { fill : 'origin', + pointHitRadius: 10, + borderColor: `rgba(128, 128, 128, 0.2)`, + ...chartCommon +} + +const chartDefaultOption: Partial&any = { + animation: false } export function patchChartJsRadar(){ @@ -51,6 +65,8 @@ export function patchChartJsRadar(){ if (chart.data.datasets) { chart.data.datasets = chart.data.datasets .map(dataset => { + + // if datasets is a standard deviation in radar graph if (dataset.label && /_sd$/.test(dataset.label)) { const originalDS = chart.data.datasets.find(baseDS => typeof baseDS.label !== 'undefined' && (baseDS.label == dataset.label.replace(/_sd$/, ''))) if (originalDS) { @@ -64,12 +80,17 @@ export function patchChartJsRadar(){ } else if (dataset.label) { const sdDS = chart.data.datasets.find(sdDS => typeof sdDS.label !== 'undefined' && (sdDS.label == dataset.label + '_sd')) if (sdDS) { + // if dataset is a radar graph, but not the standard deviation portion return { ...dataset, ...chartBaseStyle } } else { - return dataset + // other dataset (linear profile) + return { + ...dataset, + ...chartBaseStyle + } } } else { return dataset @@ -78,4 +99,80 @@ export function patchChartJsRadar(){ } } }) -} \ No newline at end of file +} + +export function getPatchChartJsOption({ darkmode } : { darkmode: boolean } = { darkmode: false}){ + + const patchColor = prop => { + if (!prop) return null + const { ...rest } = prop + return { + ...rest, + color: darkmode + ? `rgba(128, 128, 128, 0.2)` + : `rgba(128, 128, 128, 0.2)` + } + } + + const patchScale = scale => { + if (!scale) return null + const { + angleLines, + gridLines, + // ticks, + // scaleLabel, + ...restScale + } = scale + const overwritingObj = { + ...( + {angleLines: patchColor(angleLines || {})} + ), + ...( + {gridLines: patchColor(gridLines || {})} + ), + } + return { + ...restScale, + ...overwritingObj + } + } + + const patchScales = scales => { + if (!scales) return null + const { xAxes, yAxes, ...rest } = scales + return { + ...rest, + ...( + xAxes + ? { xAxes: xAxes.map(patchScale) } + : {} + ), + ...( + yAxes + ? { yAxes: yAxes.map(patchScale) } + : {} + ) + } + } + return function patchChartJsOption(chartOption: ChartConfiguration): ChartConfiguration{ + const { options , ...rest } = chartOption + const { scale, scales, animation = {}, ...otherOptions } = options + return { + ...rest, + options: { + ...chartDefaultOption, + ...otherOptions, + ...( + scale + ? {scale: patchScale(scale)} + : {} + ), + ...( + scales + ? {scales: patchScales(scales)} + : {} + ) + } + } + } +} diff --git a/stencil.config.ts b/stencil.config.ts index b80bb9f..b69a217 100644 --- a/stencil.config.ts +++ b/stencil.config.ts @@ -1,4 +1,5 @@ import { Config } from '@stencil/core'; +import replace from '@rollup/plugin-replace' export const config: Config = { namespace: 'kg-dataset-previewer', @@ -14,5 +15,10 @@ export const config: Config = { type: 'www', serviceWorker: null // disable service workers } + ], + plugins: [ + replace({ + __BACKEND_URL__: process.env.KG_DATASET_PREVIEWER_BACKEND_URL || `https://hbp-kg-dataset-previewer.apps.hbp.eu/datasetPreview` + }) ] };