Merge pull request #199 from hatemhosny/releases/v0.3.0

Prepare release v0.3.0

.github/workflows/livecodes-post-comment.yml

@@ -0,0 +1,21 @@
+name: comment
+
+on:
+  workflow_run:
+    workflows: ['livecodes'] # the workflow that created the artifact
+    types:
+      - completed
+
+jobs:
+  upload:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    if: >
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success'
+
+    steps:
+      - uses: live-codes/pr-comment-from-artifact@v1
+        with:
+          GITHUB_TOKEN: ${{ github.token }}

.github/workflows/livecodes-preview.yml

@@ -0,0 +1,18 @@
+name: livecodes
+
+on: [pull_request]
+
+jobs:
+  build_and_prepare:
+    runs-on: ubuntu-latest
+    name: Generate Playgrounds
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Build and generate
+        uses: live-codes/preview-in-livecodes@v1
+        with:
+          install-command: 'npm install'
+          build-command: 'npm run build'
+          base-url: 'https://deploy-preview-{{LC::PR}}--racingbars.netlify.app/'

.livecodes/js-esm.json

@@ -0,0 +1,26 @@
+{
+  "title": "JavaScript (ESM)",
+  "activeEditor": "script",
+  "markup": {
+    "language": "html",
+    "content": "<div id=\"race\">Loading...</div>"
+  },
+  "style": {
+    "language": "css",
+    "content": "#race {\n  height: 80vh;\n}\n"
+  },
+  "script": {
+    "language": "javascript",
+    "content": "import { race } from \"racing-bars\";\n\n/** @type {import('racing-bars').Options} */\nconst options = {\n  dataTransform: (data) =>\n    data.map((d) => ({\n      ...d,\n      icon: `https://flagsapi.com/${d.code}/flat/64.png`,\n    })),\n  title: \"World Population\",\n  subTitle: \"Country Population in millions\",\n  caption: \"Source: World Bank\",\n  dateCounter: \"YYYY\",\n  showIcons: true,\n  labelsPosition: \"outside\",\n};\n\nrace(\"{{LC::TO_URL(./data/population.csv)}}\", \"#race\", options);\n"
+  },
+  "customSettings": {
+    "imports": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.js)}}",
+      "racing-bars/react": "{{LC::TO_URL(./lib/react.js)}}",
+      "racing-bars/vue": "{{LC::TO_URL(./lib/vue.js)}}"
+    },
+    "types": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.d.ts)}}"
+    }
+  }
+}

.livecodes/js-umd.json

@@ -0,0 +1,26 @@
+{
+  "title": "JavaScript (UMD)",
+  "activeEditor": "script",
+  "markup": {
+    "language": "html",
+    "content": "<div id=\"race\">Loading...</div>\n\n<script src=\"{{LC::TO_URL(./lib/racing-bars.umd.js)}}\"></script>"
+  },
+  "style": {
+    "language": "css",
+    "content": "#race {\n  height: 80vh;\n}\n"
+  },
+  "script": {
+    "language": "javascript",
+    "content": "const options = {\n  dataTransform: (data) =>\n    data.map((d) => ({\n      ...d,\n      icon: `https://flagsapi.com/${d.code}/flat/64.png`,\n    })),\n  title: \"World Population\",\n  subTitle: \"Country Population in millions\",\n  caption: \"Source: World Bank\",\n  dateCounter: \"YYYY\",\n  showIcons: true,\n  labelsPosition: \"outside\",\n};\n\nracingBars.race(\"{{LC::TO_URL(./data/population.csv)}}\", \"#race\", options);\n"
+  },
+  "customSettings": {
+    "imports": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.js)}}",
+      "racing-bars/react": "{{LC::TO_URL(./lib/react.js)}}",
+      "racing-bars/vue": "{{LC::TO_URL(./lib/vue.js)}}"
+    },
+    "types": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.d.ts)}}"
+    }
+  }
+}

.livecodes/react.json

@@ -0,0 +1,22 @@
+{
+  "title": "React",
+  "activeEditor": "script",
+  "style": {
+    "language": "css",
+    "content": ".race {\n  height: 80vh;\n}\n"
+  },
+  "script": {
+    "language": "jsx",
+    "content": "import RacingBars from \"racing-bars/react\";\n\nexport default function App() {\n  /** @type {import('racing-bars').Options} */\n  const options = {\n    dataUrl: \"{{LC::TO_URL(./data/population.csv)}}\",\n    dataTransform: (data) =>\n      data.map((d) => ({\n        ...d,\n        icon: `https://flagsapi.com/${d.code}/flat/64.png`,\n      })),\n    title: \"World Population\",\n    subTitle: \"Country Population in millions\",\n    caption: \"Source: World Bank\",\n    dateCounter: \"YYYY\",\n    showIcons: true,\n    labelsPosition: \"outside\",\n  };\n\n  return <RacingBars className=\"race\" {...options}>Loading...</RacingBars>;\n}\n"
+  },
+  "customSettings": {
+    "imports": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.js)}}",
+      "racing-bars/react": "{{LC::TO_URL(./lib/react.js)}}",
+      "racing-bars/vue": "{{LC::TO_URL(./lib/vue.js)}}"
+    },
+    "types": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.d.ts)}}"
+    }
+  }
+}

.livecodes/svelte.json

@@ -0,0 +1,18 @@
+{
+  "title": "Svelte",
+  "activeEditor": "script",
+  "script": {
+    "language": "svelte",
+    "content": "<script>\n  import { onMount } from \"svelte\";\n  import { race } from \"racing-bars\";\n\n  const options = {\n    dataTransform: (data) =>\n      data.map((d) => ({\n        ...d,\n        icon: `https://flagsapi.com/${d.code}/flat/64.png`,\n      })),\n    title: \"World Population\",\n    subTitle: \"Country Population in millions\",\n    caption: \"Source: World Bank\",\n    dateCounter: \"YYYY\",\n    showIcons: true,\n    labelsPosition: \"outside\",\n  };\n\n  onMount(() => {\n    race(\"{{LC::TO_URL(./data/population.csv)}}\", \"#race\", options);\n  });\n</script>\n\n<div id=\"race\">Loading...</div>\n\n<style>\n  #race {\n    height: 80vh;\n  }\n</style>\n"
+  },
+  "customSettings": {
+    "imports": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.js)}}",
+      "racing-bars/react": "{{LC::TO_URL(./lib/react.js)}}",
+      "racing-bars/vue": "{{LC::TO_URL(./lib/vue.js)}}"
+    },
+    "types": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.d.ts)}}"
+    }
+  }
+}

.livecodes/ts.json

@@ -0,0 +1,26 @@
+{
+  "title": "TypeScript",
+  "activeEditor": "script",
+  "markup": {
+    "language": "html",
+    "content": "<div id=\"race\">Loading...</div>"
+  },
+  "style": {
+    "language": "css",
+    "content": "#race {\n  height: 80vh;\n}\n"
+  },
+  "script": {
+    "language": "typescript",
+    "content": "import { race, type Options } from \"racing-bars\";\n\nconst options: Options = {\n  dataTransform: (data) =>\n    data.map((d) => ({\n      ...d,\n      icon: `https://flagsapi.com/${d.code}/flat/64.png`,\n    })),\n  title: \"World Population\",\n  subTitle: \"Country Population in millions\",\n  caption: \"Source: World Bank\",\n  dateCounter: \"YYYY\",\n  showIcons: true,\n  labelsPosition: \"outside\",\n};\n\nrace(\"{{LC::TO_URL(./data/population.csv)}}\", \"#race\", options);\n"
+  },
+  "customSettings": {
+    "imports": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.js)}}",
+      "racing-bars/react": "{{LC::TO_URL(./lib/react.js)}}",
+      "racing-bars/vue": "{{LC::TO_URL(./lib/vue.js)}}"
+    },
+    "types": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.d.ts)}}"
+    }
+  }
+}

.livecodes/vue.json

@@ -0,0 +1,18 @@
+{
+  "title": "Vue",
+  "activeEditor": "script",
+  "script": {
+    "language": "vue",
+    "content": "<script setup>\n  import RacingBars from \"racing-bars/vue\";\n\n  const options = {\n    dataUrl: \"{{LC::TO_URL(./data/population.csv)}}\",\n    dataTransform: (data) =>\n      data.map((d) => ({\n        ...d,\n        icon: `https://flagsapi.com/${d.code}/flat/64.png`,\n      })),\n    title: \"World Population\",\n    subTitle: \"Country Population in millions\",\n    caption: \"Source: World Bank\",\n    dateCounter: \"YYYY\",\n    showIcons: true,\n    labelsPosition: \"outside\",\n  };\n</script>\n\n<template>\n  <RacingBars class=\"race\" v-bind=\"options\">Loading...</RacingBars>\n</template>\n\n<style scoped>\n  .race {\n    height: 80vh;\n  }\n</style>\n"
+  },
+  "customSettings": {
+    "imports": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.js)}}",
+      "racing-bars/react": "{{LC::TO_URL(./lib/react.js)}}",
+      "racing-bars/vue": "{{LC::TO_URL(./lib/vue.js)}}"
+    },
+    "types": {
+      "racing-bars": "{{LC::TO_URL(./lib/racing-bars.d.ts)}}"
+    }
+  }
+}

CHANGELOG.md

@@ -4,6 +4,38 @@ All notable changes to this project will be documented in this file. See [standa
 
 ---
 
+## [v0.3.0](https://github.com/hatemhosny/racing-bars/compare/v0.2.0...v0.3.0) (2024-09-07)
+
+### Highlights for this release
+
+- The charts are now responsive and works much better on smaller screens. Dynamically resizing the container element will also resize the chart.
+- Added the option `valueDecimals` to control decimal spaces.
+- The `labelsPosition` option can now be set to `"none"` to hide the labels (e.g. for icons only).
+
+In addition to some bug fixes.
+
+The website homepage now has a GUI editor for chart options. Also added search capability in the website.
+
+Thank you @AhmedElbohoty for the valuable contribution.
+
+### Bug Fixes
+
+- **api:** re-prepare data when `makeCumulative` option is changed by `changeOptions` API method ([80584ca](https://github.com/hatemhosny/racing-bars/commit/80584ca3622499a4b5c6e2b7f6b070ac31bfa758))
+- **data:** fix passing data to worker ([94aadd5](https://github.com/hatemhosny/racing-bars/commit/94aadd5a0bd3ebc7ec917dd3eacb43c7f8c132b5))
+- **renderer:** avoid icons overflow outside bars ([b75dedb](https://github.com/hatemhosny/racing-bars/commit/b75dedb51cde6778431a97d85c4000a104c993e8))
+
+### Features
+
+- **options:** add labelPositions `"none"` ([4127c7a](https://github.com/hatemhosny/racing-bars/commit/4127c7a5dd49c5add1b1bf323815d0ccef965ec3))
+- **options:** add the option `valueDecimals` ([330202a](https://github.com/hatemhosny/racing-bars/commit/330202aa7b432e2ff6b509128c0da53226b3d064))
+- **options:** validate options ([0dccf85](https://github.com/hatemhosny/racing-bars/commit/0dccf850d4af29eda795a37490606dc11f80cf9c))
+- **renderer:** resize chart on resizing root element ([daec0cd](https://github.com/hatemhosny/racing-bars/commit/daec0cdebf95d15736edc52a4101fdd14c231f47))
+- **styles:** make the chart text & controls responsive ([eb2a353](https://github.com/hatemhosny/racing-bars/commit/eb2a35341dcda6fbfe3563d7c7cfc1d5f5253430))
+- **website:** add options editor GUI ([a023795](https://github.com/hatemhosny/racing-bars/commit/a023795a1f78bbb7ae3562a736641f09d50245b6))
+- **website:** add search ([00015fc](https://github.com/hatemhosny/racing-bars/commit/00015fce403e40099c8288a4d6fd4e6fffe32d71))
+
+---
+
 ## [v0.2.0](https://github.com/hatemhosny/racing-bars/compare/v0.1.2...v0.2.0) (2024-09-01)
 
 ### Bug Fixes