Merge pull request #170 from hatemhosny/releases/v0.1.2

Prepare release v0.1.2

.eslintignore

@@ -8,3 +8,6 @@ vendor_modules
 **/*.json
 scripts
 python
+website/.docusaurus
+website/docs/api
+website/static

.github/ISSUE_TEMPLATE.md

@@ -7,6 +7,9 @@
 - **Summary**
 
 - **Link to minimal reproduction**
-  (please provide a link to a minimal reproduction of the issue e.g. on https://livecodes.io)
+  <!--
+  please provide a link to a minimal reproduction of the issue e.g. on https://livecodes.io
+  You may use this as a starting point: https://livecodes.io/?x=id/6sdjrf25i67
+  -->
 
 - **Other information** (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,13 +1,17 @@
-* **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
+- **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
 
+- **What is the current behavior?** (You can also link to an open issue here)
 
+- **What is the new behavior (if this is a feature change)?**
 
-* **What is the current behavior?** (You can also link to an open issue here)
+- **Issue related to this PR**
+  <!--
+  please make sure that these changes have been discussed and approved in an issue.
+  Otherwise, please do: https://github.com/hatemhosny/racing-bars/issues/new
+  -->
 
+  [ ] The changes have been discussed in an issue and the approach has been approved.
 
+  issue:
 
-* **What is the new behavior (if this is a feature change)?**
-
-
-
-* **Other information**:
+- **Other information**:

.github/workflows/release-pr.yml

@@ -0,0 +1,24 @@
+name: Release PR
+
+# on creating a release branch (releases/**) create a PR to main
+
+on: create
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    if: contains(github.ref, 'refs/heads/releases/')
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.GH_ACTIONS_REPO_PAT }}
+
+      - name: Get version
+        id: vars
+        run: echo ::set-output name=version::$(echo ${{github.ref_name}} | sed 's/^releases\///')
+
+      - name: Create pull request to main
+        run: gh pr create --title "Prepare release ${{steps.vars.outputs.version}}" --body "Prepare release ${{steps.vars.outputs.version}}" --base main --head "${{github.ref_name}}"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_ACTIONS_REPO_PAT }}

.github/workflows/release.yml

@@ -0,0 +1,83 @@
+name: Release
+
+# on merging a release branch (releases/**) to main:
+# - create a GitHub release (with release notes and attached files)
+# - create a tag
+# - publish to npm
+# - create a pull request to develop to incorporate back the changes
+
+on:
+  pull_request:
+    branches:
+      - main
+    types: [closed]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged && startsWith(github.head_ref, 'releases/')
+    env:
+      NODE_OPTIONS: '--max_old_space_size=4096'
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.GH_ACTIONS_REPO_PAT }}
+
+      - name: Get version
+        id: vars
+        run: echo ::set-output name=version::$(echo ${{github.head_ref}} | sed 's/^releases\///')
+
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '18.x'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Test
+        run: npm run test
+
+      - name: Release notes
+        run: node ./scripts/release-notes.js
+
+      - name: Create tag
+        run: git tag ${{steps.vars.outputs.version}} && git push origin --tags
+
+      - name: Compress build directory (tar)
+        run: tar -czf racing-bars-${{steps.vars.outputs.version}}.tar.gz build
+
+      - name: Compress build directory (zip)
+        uses: vimtor/action-zip@v1
+        with:
+          files: build/
+          dest: racing-bars-${{steps.vars.outputs.version}}.zip
+
+      - name: Create release
+        uses: softprops/action-gh-release@v1
+        with:
+          name: ${{steps.vars.outputs.version}}
+          tag_name: ${{steps.vars.outputs.version}}
+          body_path: CHANGELOG.tmp.md
+          files: |
+            racing-bars-${{steps.vars.outputs.version}}.tar.gz
+            racing-bars-${{steps.vars.outputs.version}}.zip
+          token: ${{ secrets.GH_ACTIONS_REPO_PAT }}
+
+      - name: Publish to NPM
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
+          npm publish --access=public
+        working-directory: ./build
+        env:
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+
+      - name: Create a pull request to develop
+        if: startsWith(github.head_ref, 'releases/v')
+        run: gh pr create --title "release ${{steps.vars.outputs.version}}" --body "https://www.npmjs.com/package/racing-bars" --base develop --head main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_ACTIONS_REPO_PAT }}

.stylelintignore

@@ -0,0 +1,39 @@
+build/
+
+*.js
+*.jsx
+
+*.ts
+*.tsx
+*.mjs
+
+*.json
+
+*.html
+*.txt
+*.md
+
+*.svg
+*.png
+*.jpg
+*.gif
+*.mp4
+
+*.toml
+*.csv
+*.xml
+*.ico
+*.pptx
+*.xcf
+
+*.py
+
+*.js.map
+*.lock
+
+*.yml
+*.yaml
+
+website/static/lib/
+LICENSE
+PKG-INFO

CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to this project will be documented in this file. See [standa
 
 ---
 
+## [v0.1.2](https://github.com/hatemhosny/racing-bars/compare/v0.1.1...v0.1.2) (2024-08-30)
+
+### Bug Fixes
+
+- **data:** fix relative urls in web worker ([ee8296d](https://github.com/hatemhosny/racing-bars/commit/ee8296da3566455abe610ec2aeee0e24fd1a9018))
+
+### Features
+
+- **data:** handle loading data errors ([ef615d7](https://github.com/hatemhosny/racing-bars/commit/ef615d7bca13d16973d7a329a38b12325f0daa4a))
+
+### Others
+
+- **website:** add all gallery demos to playground ([b2c288e](https://github.com/hatemhosny/racing-bars/commit/b2c288e8c7b03748ba99dfa943bd6031c306d7be))
+- **website:** allow playground to change languages ([12f7f48](https://github.com/hatemhosny/racing-bars/commit/12f7f487fee06df7b994794a09db15a4f76073d8))
+- **website:** allow selecting playground language in querystring ([5725e5f](https://github.com/hatemhosny/racing-bars/commit/5725e5f13a626021d702a2d09d45245955b6d235))
+- **website:** load gallery demos in embedded playground ([747eade](https://github.com/hatemhosny/racing-bars/commit/747eadea98e48558537e7b169532a3f278e6d6df))
+- lint:stylelint and test:lint scripts ([fd43d45](https://github.com/hatemhosny/racing-bars/commit/fd43d45461297e791e1620569d5613ff3ba5fd81))
+
+- **build:** upgrade most dependencies, including docusaurus that powers the website (Thanks @AhmedElbohoty)
+
+---
+
 ## [0.1.1](https://github.com/hatemhosny/racing-bars/compare/v0.1.0...0.1.1) (2024-08-20)
 
 - Automate preparing releases

demo/api.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -29,7 +29,7 @@
     <script src="../build/racing-bars.umd.js"></script>
     <script>
       const options = {
-        selector: '#race',
+        dataType: 'csv',
         // dataShape: 'wide',
         // fillDateGaps: 'months',
         // fillDateGapsValue: 'last',
@@ -71,7 +71,7 @@
       // document.getElementById('race').addEventListener('firstDate', () => console.log('event fired'));
 
       racingBars.loadData('/data/population.csv', 'csv').then(async (data) => {
-        const racer = await racingBars.race(data, options);
+        const racer = await racingBars.race(data, '#race', options);
 
         racer.on('firstDate', () => console.log('firstDate'));
         const watcher = racer.on('dateChange', ({ date }) => console.log('date change', date));

demo/change-options.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <meta charset="utf-8" />
   <style></style>
@@ -9,70 +9,36 @@
     <div id="race" class="race">Loading...</div>
   </div>
 
-  <script src="scripts/d3.min.js"></script>
-  <script src="scripts/racing-bars.umd.js"></script>
-  <script>
+  <script type="module">
+    import { race } from '../build/racing-bars.js';
     const options = {
-      selector: '#race',
-      // dataShape: 'wide',
-      // fillDateGaps: 'months',
-      // fillDateGapsValue: 'last',
+      dataType: 'csv',
+      dataType: 'csv',
       title: 'World Population',
       subTitle: 'in millions',
-      // dateCounter: 'MM/YYYY',
-      // dateCounter: (currentDate, dateSlice, dates) =>
-      //   `${dates.indexOf(currentDate) + 1} of ${dates.length}`,
       caption: 'Source: World Bank',
-      // caption: (date, dateSlice, allDates) =>
-      //   `Total: ${Math.round(dateSlice.reduce((acc, curr) => acc + curr.value, 0))}`,
-      // `Max: ${Math.round(Math.max(...dateSlice.map((d) => d.value)))}`,
-      // startDate: '2009-4-1',
-      // endDate: '1965-12-31',
-      // loop: true,
-      // loopDelay: 5000,
       tickDuration: 500,
-      // topN: 15,
       height: 'window*0.85',
       width: 'window*0.5',
-      // showGroups: true,
       mouseControls: true,
       keyboardControls: true,
-      // controlButtons: 'none',
       overlays: 'none',
       showGroups: true,
-      // showIcons: true,
       autorun: false,
-      // colorSeed: "asdfs",
-      // labelsPosition: 'outside',
-      // labelsWidth: 250,
-      // embedStyles: false,
-      // theme: 'dark',
-      // fixedScale: true,
-      // highlightBars: true,
-      // selectBars: true,
+      dataTransform: (data) => data.map((d) => ({ ...d, value: Number(d.value) * 1000 })),
     };
 
-    let racer;
-    racingBars.loadData('../data/population.csv', 'csv').then((data) => {
-      // racingBars.loadData('../data/procedures.json').then((data) => {
-      // racingBars.loadData('../data/procedures_wide.csv', 'csv').then((data) => {
-      data = data.map((d) => ({
-        ...d,
-        value: Number(d.value) * 1000,
-        // icon: `https://www.countryflags.io/${d.code.toLowerCase()}/flat/64.png`,
-      }));
-      racer = racingBars.race(data, options);
+    const racer = await race('../data/population.csv', '#race', options);
 
-      setTimeout(() => {
-        racer.changeOptions({
-          width: 900,
-          height: 300,
-          showGroups: false,
-          theme: 'dark',
-          startDate: '1975-01-01',
-          labelsPosition: 'outside',
-        });
-      }, 5000);
-    });
+    setTimeout(() => {
+      racer.changeOptions({
+        width: 900,
+        height: 300,
+        showGroups: false,
+        theme: 'dark',
+        startDate: '1975-01-01',
+        labelsPosition: 'outside',
+      });
+    }, 5000);
   </script>
 </body>

demo/change-options2.html

@@ -6,26 +6,22 @@
 
 <body>
   <br /><br /><br /><br /><br /><br />
-  <button onClick="addBar()">Add Bar</button> - <button onClick="resetBars()">Reset Bars</button></p>
+  <button id="add">Add Bar</button> - <button id="reset">Reset Bars</button></p>
 
   <div id="container">
     <div id="race" class="race">Loading...</div>
   </div>
 
-  <script src="scripts/d3.min.js"></script>
-  <script src="scripts/racing-bars.umd.js"></script>
-  <script>
+  <script type="module">
+    import { race } from '../build/racing-bars.js';
     let topN = 5;
     const options = {
-      selector: '#race',
+      dataType: 'csv',
       title: 'Number of Bars: ' + topN,
       topN,
     };
 
-    let racer;
-    racingBars.loadData('../data/population.csv', 'csv').then((data) => {
-      racer = racingBars.race(data, options);
-    });
+    const racer = await race('../data/population.csv', '#race', options);
 
     function addBar() {
       topN += 1;
@@ -43,5 +39,8 @@
       });
     }
 
+    document.getElementById('add').addEventListener('click', addBar);
+    document.getElementById('reset').addEventListener('click', resetBars);
+
   </script>
 </body>