chore: darkmode

FZJ-INM1-BDA · Jan 17, 2020 · ec2bb22 · ec2bb22
1 parent 0397b60
commit ec2bb22
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,15 +65,18 @@ export class KgPreviewChart{
     const { width, height } = this.getHostElementInfo()
     this.canvas.width = width
     this.canvas.height = height
-
   }
 
   protected renderChart():void{
     if (!this.data) {
       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
@@ -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
@@ -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
@@ -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
@@ -7,30 +7,70 @@
 
   <script type="module" src="/build/kg-dataset-previewer.esm.js"></script>
   <script nomodule src="/build/kg-dataset-previewer.js"></script>
+  <style>
+    html, body, #container
+    {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
 
+    #container
+    {
+      display: flex!important;
+      flex-direction: row;
+    }
+  </style>
 </head>
 <body>
-
-  <kg-dataset-list
-    kg-ds-prv-container-class="ul-container test-container"
-    kg-ds-prv-item-class="item-class"
-    kg-ds-prv-kg-id="cb875c0d-97f4-4dbc-a9ce-472d8ba58c99">
+  <label for="darkmode-checkbox">
+    <input type="checkbox" id="darkmode-checkbox">darkmode
+  </label>
 
-  </kg-dataset-list>
+  <div id="container">
+
+    <kg-dataset-list
+      kg-ds-prv-container-class="ul-container test-container"
+      kg-ds-prv-item-class="item-class"
+      kg-ds-prv-kg-id="cb875c0d-97f4-4dbc-a9ce-472d8ba58c99">
+
+    </kg-dataset-list>
+
+    <kg-dataset-previewer
+      kg-ds-prv-kg-id="cb875c0d-97f4-4dbc-a9ce-472d8ba58c99"
+      kg-ds-prv-filename="5-HT₂(5-HT)/autoradiography">
+    </kg-dataset-previewer>
+    <kg-dataset-previewer
+      style="display:block; width: 500px; height: 500px;"
+      kg-ds-prv-kg-id="cb875c0d-97f4-4dbc-a9ce-472d8ba58c99"
+      kg-ds-prv-filename="α₁(NA)/profile">
+    </kg-dataset-previewer>
+    <kg-dataset-previewer
+      style="display:block; width: 500px; height: 500px;"
+      kg-ds-prv-kg-id="e715e1f7-2079-45c4-a67f-f76b102acfce"
+      kg-ds-prv-filename="fingerprint">
+    </kg-dataset-previewer>
+  </div>
 
-  <kg-dataset-previewer
-    kg-ds-prv-kg-id="cb875c0d-97f4-4dbc-a9ce-472d8ba58c99"
-    kg-ds-prv-filename="5-HT₂(5-HT)/autoradiography">
-  </kg-dataset-previewer>
-  <kg-dataset-previewer
-    style="display:block; width: 500px; height: 500px;"
-    kg-ds-prv-kg-id="cb875c0d-97f4-4dbc-a9ce-472d8ba58c99"
-    kg-ds-prv-filename="α₁(NA)/profile">
-  </kg-dataset-previewer>
-  <kg-dataset-previewer
-    style="display:block; width: 500px; height: 500px;"
-    kg-ds-prv-kg-id="e715e1f7-2079-45c4-a67f-f76b102acfce"
-    kg-ds-prv-filename="fingerprint">
-  </kg-dataset-previewer>
 </body>
+<script>
+  const checkbox = document.getElementById('darkmode-checkbox')
+  if (!checkbox) throw new Error(`checkbox not found`)
+
+  const kgDsPrvs = document.querySelectorAll('kg-dataset-previewer')
+
+  document.addEventListener('change', (ev) => {
+    const { checked } = checkbox
+
+    for (const prvs of kgDsPrvs){
+      prvs.setAttribute('kg-ds-prv-darkmode', checked)
+    }
+
+    if (checked) {
+      document.body.style.backgroundColor = `rgb(0,0,0)`
+    } else {
+      document.body.style.backgroundColor = `rgb(255,255,255)`
+    }
+  })
+</script>
 </html>
diff --git 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 <kg-dataset-previewer-chart
+          kg-ds-prv-darkmode={darkmode}
           style={{width: '100%', height: '100%', display: 'block'}}
           kg-ds-prv-chartjs-data={JSON.stringify(data)}>
         </kg-dataset-previewer-chart>