add note about direct data structure

upsetjs · Jun 20, 2020 · 0390486 · 0390486
1 parent 5660c3f
commit 0390486
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# Chart.js Venn Diagram Chart
+# Chart.js Venn and Euler Diagram Chart
 
 [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]
 
-Chart.js module for charting venn diagrams with oen, two, or three sets. Adding new chart type: `venn`.
+Chart.js module for charting venn diagrams with one, two, or three sets. Adding new chart type: `venn` and `euler`.
 
 **Works only with Chart.js >= 3.0.0**
 
@@ -11,7 +11,7 @@ Chart.js module for charting venn diagrams with oen, two, or three sets. Adding
 ## Install
 
 ```bash
-npm install --save chart.js@next chartjs-chart-venn@next
+npm install --save chart.js@next chartjs-chart-venn
 ```
 
 ## Usage
@@ -41,11 +41,75 @@ const config = {
 };
 ```
 
+Alternative datastructure
+
+```ts
+const config = {
+  type: 'venn',
+  data: {
+    labels: [
+      'Soccer',
+      'Tennis',
+      'Volleyball',
+      'Soccer ∩ Tennis',
+      'Soccer ∩ Volleyball',
+      'Tennis ∩ Volleyball',
+      'Soccer ∩ Tennis ∩ Volleyball',
+    ],
+    datasets: [
+      {
+        label: 'Sports',
+        data: [
+          { sets: ['Soccer'], value: 2 },
+          { sets: ['Tennis'], value: 0 },
+          { sets: ['Volleyball'], value: 1 },
+          { sets: ['Soccer', 'Tennis'], value: 1 },
+          { sets: ['Soccer', 'Volleyball'], value: 0 },
+          { sets: ['Tennis', 'Volleyball'], value: 1 },
+          { sets: ['Soccer', 'Tennis', 'Volleyball'], value: 1 },
+        ],
+      },
+    ],
+  },
+  options: {},
+};
+```
+
+### Styling of elements
+
+`ArcSlice` elements have the basic `backgroundColor`, `borderColor`, and `borderWidth` properties similar to a regular rectangle.
+
+## Euler Diagram
+
+Euler diagrams are relaxed proportional venn diagrams such that the area of the circles and overlap try to fit the overlapping value.
+It is a relaxed in a way that is just approximates the proportions using a numerical optimization process.
+Moreover, only one and two set overlaps are used for the computation.
+The library uses [venn.js](https://github.com/upsetjs/venn.js) in the background.
+
+### Data Structure
+
+```ts
+const config = {
+  type: 'euler',
+  data: ChartVenn.extractSets(
+    [
+      { label: 'A', values: [1, 2, 3, 4, 11, 12, 13, 14, 15, 16, 17, 18] },
+      { label: 'B', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 19, 20, 21, 22, 23] },
+      { label: 'C', values: [1, 11, 12, 4, 5, 24, 25, 26, 27, 28, 29, 30] },
+    ],
+    {
+      label: 'Sets',
+    }
+  ),
+  options: {},
+};
+```
+
 ### Styling of elements
 
-`ArcSlice` elements have the basic `backgroundColor`, `borderColor`, and `borderWidth` properties similar to a regular Rectangle.
+see Venn Diagram
 
-### ESM and Tree Shaking
+## ESM and Tree Shaking
 
 The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.
 
@@ -98,6 +162,8 @@ yarn release
 yarn release:pre
 ```
 
+[mit-image]: https://img.shields.io/badge/License-MIT-yellow.svg
+[mit-url]: https://opensource.org/licenses/MIT
 [npm-image]: https://badge.fury.io/js/chartjs-chart-venn.svg
 [npm-url]: https://npmjs.org/package/chartjs-chart-venn
 [github-actions-image]: https://github.com/sgratzl/chartjs-chart-venn/workflows/ci/badge.svg

diff --git a/samples/data.html b/samples/data.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Venn Diagram Chart</title>
+    <script src="https://unpkg.com/chart.js@3.0.0-alpha/dist/Chart.js"></script>
+    <script src="../dist/chartvenn.umd.development.js"></script>
+  </head>
+
+  <body>
+    <div id="container" style="width: 75%;">
+      <canvas id="canvas"></canvas>
+    </div>
+    <script>
+      window.onload = () => {
+        const ctx = document.getElementById('canvas').getContext('2d');
+        window.myBar = new Chart(ctx, {
+          type: 'venn',
+          data: {
+            labels: [
+              'Soccer',
+              'Tennis',
+              'Volleyball',
+              'Soccer ∩ Tennis',
+              'Soccer ∩ Volleyball',
+              'Tennis ∩ Volleyball',
+              'Soccer ∩ Tennis ∩ Volleyball',
+            ],
+            datasets: [
+              {
+                label: 'Sports',
+                data: [
+                  { sets: ['Soccer'], value: 2 },
+                  { sets: ['Tennis'], value: 0 },
+                  { sets: ['Volleyball'], value: 1 },
+                  { sets: ['Soccer', 'Tennis'], value: 1 },
+                  { sets: ['Soccer', 'Volleyball'], value: 0 },
+                  { sets: ['Tennis', 'Volleyball'], value: 1 },
+                  { sets: ['Soccer', 'Tennis', 'Volleyball'], value: 1 },
+                ],
+              },
+            ],
+          },
+          options: {
+            title: {
+              display: true,
+              text: 'Chart.js Venn Diagram Chart',
+            },
+          },
+        });
+      };
+    </script>
+  </body>
+</html>
diff --git a/src/data.ts b/src/data.ts
@@ -56,8 +56,8 @@ export function extractSets<T>(data: readonly IRawSet<T>[], options: IGenerateOp
         generateSubset([base[1]], [base[0], base[2]], lookup),
         generateSubset([base[2]], [base[0], base[1]], lookup),
         generateSubset([base[0], base[1]], [base[2]], lookup),
+        generateSubset([base[0], base[2]], [base[1]], lookup),
         generateSubset([base[1], base[2]], [base[0]], lookup),
-        generateSubset([base[2], base[0]], [base[1]], lookup),
         generateSubset([base[0], base[1], base[2]], [], lookup)
       );
       break;