From d06c8f823995dce2d911a1e18663359c68089052 Mon Sep 17 00:00:00 2001 From: Zachariah Frank Date: Wed, 28 Feb 2024 13:39:34 +0100 Subject: [PATCH 1/2] Access info icon from iconStore (via options component) instead of hard-coded path --- packages/demo/public/options.json | 5 ++++- packages/demo/src/AppCCP.svelte | 3 --- packages/lib/src/components/Options.wc.svelte | 20 +++++++++++++++++++ .../buttons/InfoButtonComponent.wc.svelte | 8 +------- 4 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/demo/public/options.json b/packages/demo/public/options.json index 7dc8d0fa..f465f7e8 100644 --- a/packages/demo/public/options.json +++ b/packages/demo/public/options.json @@ -1,4 +1,7 @@ { + "iconOptions": { + "infoUrl": "info-circle-svgrepo-com.svg" + }, "chartOptions": { "patients": { "legendMapping": { @@ -166,4 +169,4 @@ } ] } -} \ No newline at end of file +} diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte index 616df348..fd06e5ae 100644 --- a/packages/demo/src/AppCCP.svelte +++ b/packages/demo/src/AppCCP.svelte @@ -141,7 +141,6 @@ noMatchesFoundMessage={"keine Ergebnisse gefunden"} /> @@ -156,7 +155,6 @@

Suchkriterien

{ + iconStore.update((store) => { + if (typeof options === "object" && + "iconOptions" in options) { + + if (typeof options.iconOptions === "object" && + options.iconOptions) { + + if ("infoUrl" in options.iconOptions && + typeof options.iconOptions["infoUrl"] === "string") { + + store.set("infoUrl", options.iconOptions.infoUrl); + }}} + + return store; + }); + } + $: $lensOptions = options; + $: updateIconStore(options); $: $catalogue = catalogueData; diff --git a/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte b/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte index c6d21602..20f59250 100644 --- a/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte +++ b/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte @@ -16,14 +16,8 @@ export let showQuery: boolean = false; export let infoIconUrl: string | null = null; - iconStore.update((store) => { - if (infoIconUrl) { - store.set("info", infoIconUrl); - } - return store; - }); + $: iconUrl = $iconStore.get("infoUrl"); - $: iconUrl = $iconStore.get("info"); /** * handles the toggling of the tooltip */ From e0958c55153de08d243f526c456fc510726ebe4b Mon Sep 17 00:00:00 2001 From: Mats Johansen Date: Wed, 13 Mar 2024 11:15:54 +0100 Subject: [PATCH 2/2] docs(setup): add documentation for minimal setup --- docs/LINTING.MD | 10 +- docs/SETUP.md | 466 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 473 insertions(+), 3 deletions(-) create mode 100644 docs/SETUP.md diff --git a/docs/LINTING.MD b/docs/LINTING.MD index c2bbd897..c895dd79 100644 --- a/docs/LINTING.MD +++ b/docs/LINTING.MD @@ -1,11 +1,15 @@ # Liniting -## Installing +## Install +``` npm install --dev +``` -## runing +## Run +``` npm run lint +``` -Note this will only lint staged files, so don't forget to add with git add +Note: this will only lint staged files, so don't forget to add with git add diff --git a/docs/SETUP.md b/docs/SETUP.md new file mode 100644 index 00000000..73130178 --- /dev/null +++ b/docs/SETUP.md @@ -0,0 +1,466 @@ +# Setup + +## Project + +First setup your project with a framework of your choice (Svelte, React, Vue, Angular,...). + +Then run + +``` +npm install @samply/lens +``` + +
+
+ +[comment]: <> (TODO:) +[comment]: <> (Setup minimal backend) +[comment]: <> (Provide code for a simple apt that takes the AST and returns some mock data as promise) + +## Configuration + +### Use the Lens Options Component to fill in your configuration + +``` + +``` + +- ```options``` takes the general configuration for the library as JSON. +- ```catalogueData``` takes a catalogue of search criteria, also as JSON. + +### Schemas + +
+options + +``` +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "title": "Lens Options", + "description": "The options for the lens", + "type": "object", + "properties": { + "iconOptions": { + "type": "object", + "properties": { + "infoUrl": { + "type": "string", + "pattern": "^.+$", + "description": "The icon to use for the info button" + }, + "addUrl": { + "type": "string", + "pattern": "^.+$", + "description": "The icon to use for the add button in the catalogue" + }, + "toggleUrl": { + "type": "string", + "pattern": "^.+$", + "description": "The icon to use for the toggle button in the catalogue" + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + }, + "chartOptions": { + "type": "object", + "patternProperties": { + "^.+$": { + "type": "object", + "properties": { + "legendMapping": { + "type": "object", + "patternProperties": { + "^.+$": { + "type": "string", + "pattern": "^.+$" + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + }, + "hintText": { + "type": "array", + "items": { + "type": "string", + "pattern": "^.+$", + "description": "The hint text to display as overlay of the info button" + } + }, + "aggregations": { + "type": "array", + "description": "add strings of other data keys to include in the chart", + "items": { + "type": "string", + "pattern": "^.+$" + } + }, + "tooltips": { + "type": "object", + "patternProperties": { + "^.+$": { + "type": "string", + "pattern": "^.+$", + "description": "The tooltip to display while hovering over the chart data" + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + }, + "tableOptions": { + "type": "object", + "properties": { + "headerData": { + "type": "array", + "items": { + "type": "object", + "properties": { + "title": { + "type": "string", + "description": "the title of the column", + "pattern": "^.+$" + }, + "dataKey": { + "type": "string", + "description": "a single key to display in the table", + "pattern": "^.+$" + }, + "aggregatedDataKeys": { + "type": "array", + "description": "an array of keys to aggregate and display in the table as single value", + "items": { + "type": "object", + "properties": { + "groupCode": { + "type": "string", + "pattern": "^.+$" + }, + "stratifierCode": { + "type": "string", + "pattern": "^.+$" + }, + "stratumCode": { + "type": "string", + "pattern": "^.+$" + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + } + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [ + "title" + ] + } + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": ["headerData"] + }, + "resultSummaryOptions": { + "type": "object", + "properties": { + "title": { + "type": "string", + "pattern": "^.+$" + }, + "infoButtonText": { + "type": "string", + "pattern": "^.+$" + }, + "dataTypes": { + "type": "array", + "items": { + "type": "object", + "properties": { + "title": { + "type": "string", + "pattern": "^.+$" + }, + "dataKey": { + "type": "string", + "pattern": "^.+$" + }, + "aggregatedDataKeys": { + "type": "array", + "description": "an array of keys to aggregate and display in the result summary as single value", + "items": { + "type": "object", + "properties": { + "groupCode": { + "type": "string", + "pattern": "^.+$" + }, + "stratifierCode": { + "type": "string", + "pattern": "^.+$" + }, + "stratumCode": { + "type": "string", + "pattern": "^.+$" + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + } + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + } + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [] +} +``` +
+ +
+catalogueData + +``` +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "title": "Search Parameter Catalogue", + "description": "A catalogue of search parameters", + "type": "array", + "items": { + "$ref": "#/$defs/categoryItem" + }, + "$defs": { + "childCategories": { + "type": "array", + "items": { + "$ref": "#/$defs/categoryItem" + } + }, + "categoryItem": { + "type": "object", + "properties": { + "key": { + "type": "string", + "pattern": "^.+$" + }, + "name": { + "type": "string", + "pattern": "^.+$" + }, + "subCategoryName": { + "type": "string", + "pattern": "^.+$" + }, + "infoButtonText": { + "type": "array", + "description": "The text to display in the info button", + "items": { + "type": "string", + "pattern": "^.*$" + } + }, + "system": { + "type": "string", + "pattern": "^.*$" + }, + "fieldType": { + "enum": [ + "single-select", + "number", + "autocomplete" + ] + }, + "type": { + "enum": [ + "EQUALS", + "BETWEEN" + ] + }, + "childCategories": { + "$ref": "#/$defs/childCategories" + }, + "criteria": { + "$ref": "#/$defs/criteria" + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [ + "key", + "name" + ] + }, + "criteria": { + "type": "array", + "items": { + "type": "object", + "properties": { + "key": { + "type": "string", + "pattern": "^.+$" + }, + "name": { + "type": "string", + "pattern": "^.+$" + }, + "description": { + "type": "string", + "pattern": "^.*$" + }, + "infoButtonText": { + "type": "array", + "description": "The text to display in the info button", + "items": { + "type": "string", + "pattern": "^.+$" + } + }, + "aggregatedValue": { + "type": "array", + "items": { + "type": "array", + "items": { + "type": "object", + "properties": { + "value": { + "type": "string", + "pattern": "^.+$" + }, + "name": { + "type": "string", + "pattern": "^.+$" + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [ + "value", + "name" + ] + } + } + } + }, + "additionalProperties": false, + "unevaluatedProperties": false, + "required": [ + "key", + "name" + ] + } + } + } +} +``` +
+ +
+
+ +## How to use Lens components + +Here we use a minimal setup with a search tree, an autocomplete search bar, the search button and a simple chart + +Place the following components in your application where they are needed. + +### Catalogue + +``` + +``` + +displays a catalogue navigation + + +### Search Bar + +``` + +``` + +### Search Button + +``` + +``` + +### Bar Chart + +``` + +``` + +- ```title```: the title to show as heading in the chart +- ```atalogueGroupCode```: the key of your childCategory in the catalogue +- ```chartType```: the type of the chart (currently supports: ```bar``` for bar charts and ```pie``` for pie charts + +[comment]:<> (TODO: Add full documentation website) + +[comment]:<> (There are multiple other configurations you can pass into these components, like coloring and orientation for the chart. Visit the full [documentation]link for more information.) + +
+
+ +## Styling the components + +The library provides a default styling. + +You can import it in your main css file like this: + +``` +@import "/node_modules/@samply/lens/dist/style.css"; +``` + +However you can override these styles using css (or your favorite preprocessor) with the web component syntax. + +``` +lens-catalogue::part(number-input-formfield) { + width: 60px; + margin-left: 20px; + border: solid 1px dark-gray; + border-radius: 0; + text-align: center; + font-size: 14px; +} +``` + +The styling with parts is scoped to the lens-component and does not affect other components. +You can also use pseudo classes like this: + +``` +lens-catalogue::part(number-input-formfield):focus { + border-color: blue; + outline: none; +} +``` + +Make sure to add your custom styles after the import. \ No newline at end of file