From 105c26940f0878d08e7771cf265c785c85e2be65 Mon Sep 17 00:00:00 2001
From: weru <fromweru@gmail.com>
Date: Mon, 21 Dec 2020 17:50:45 +0000
Subject: [PATCH] add charts

---
 exampleSite/content/themes.csv                           |    4 +
 exampleSite/content/projects.csv                         |   12 ++++
 exampleSite/content/_index.md                            |   14 ++++
 exampleSite/content/docs/compose/graphs-charts-tables.md |  103 ++++++++++++++++++++++++++++++++++
 4 files changed, 131 insertions(+), 2 deletions(-)

diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 9b9576e..bca7eca 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -1,6 +1,12 @@
 +++
 title = "Compose"
-
+# define chart data here
+[data]
+  fileLink = "content/projects.csv" # path to where csv is stored
+  colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"] # chart colors
+  columnTitles = ["Section", "Status", "Author"] # optional if no table will be displayed from dataset
+  baseChartOn = 3 # number of column the chart(s) and graph should be drawn from # can be overridden directly via shortcode parameter # it's therefore optional
+  title = "Projects"
 +++
 {{< block "grid-2 mt-2" >}}
 {{< column >}}
@@ -19,4 +25,8 @@
 {{< column >}}
 ![diy](/images/scribble.jpg)
 {{< /column >}}
-{{< /block >}}
\ No newline at end of file
+{{< /block >}}
+
+{{< grid "3 mt-2" >}}
+  {{< chart "data" "pie, bar, doughnut" >}}
+{{< /grid >}}
\ No newline at end of file
diff --git a/exampleSite/content/docs/compose/graphs-charts-tables.md b/exampleSite/content/docs/compose/graphs-charts-tables.md
new file mode 100644
index 0000000..0649acb
--- /dev/null
+++ b/exampleSite/content/docs/compose/graphs-charts-tables.md
@@ -0,0 +1,103 @@
++++
+title = "Bar Graphs, Charts & Tables"
+weight = 9
+[dataset1]
+  fileLink = "content/projects.csv" # path to where csv is stored
+  colors = ["#ef7f1a", "#627c62", "#11819b", "#4e1154"] # chart colors
+  columnTitles = ["Section", "Status", "Author"] # optional if not table will be displayed from dataset
+  baseChartOn = 3 # number of column the chart(s) and graph should be drawn from # can be overridden directly via shortcode parameter # it's therefore optional
+  title = "Projects"
+
+[dataset2]
+  fileLink = "content/themes.csv" # path to where csv is stored
+  colors = ["#ef7f1a", "#627c62", "#11819b", "#4e1154"] # chart colors
+  columnTitles = ["Theme", "Latest Version", "Repo Owner"] # Optional if no table will be displayed from dataset
+  baseChartOn = 2 # number of column the chart(s) and graph should be drawn from # can be overridden directly via shortcode parameter # it's therefore optional
+  title = "Hugo Themes"
++++
+
+Using [chart js library](https://www.chartjs.org/) you can display data you have stored in a `csv` file as a pie chart, bar graph or doughnut chart.
+
+At this point if you want to display data from a json or yaml file, you would need to [convert it into csv](http://convertcsv.com/json-to-csv.htm) first. Else the template will error out.
+
+Once you have a csv file, you display the charts as follows:
+
+### Example
+#### __Show a pie, doughnut & bar chart at once__
+
+Firstly define the data you want to display from the front matter:
+
+```toml
+# from front matter
+...
+[dataset1] # this key will in the chart shortcode
+  fileLink = "content/projects.csv" # path to where csv is stored
+  colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"] # chart colors
+  columnTitles = ["Section", "Status", "Author"]
+  charts = ["bar", "doughnut", "pie", "table"]
+  baseChartOn = 3 # number of column the chart(s) and graph should be drawn from
+  piechart = true
+  doughnutchart = true
+  bargraph = true
+  title = "Projects"
+  table = true # show table listing the chart data
+...
+```
+
+```markdown
+// from page content
+...
+{{</* grid " mt-2" */>}}
+  {{</* chart "dataset1" */>}}
+{{</* /grid */>}}
+...
+```
+
+{{< grid "3 mt-2 mb-2" >}}
+  {{< chart "dataset1" "pie,doughnut,bar" >}}
+{{< /grid >}}
+
+#### __Show Table at once__
+
+{{< block "mt-2" >}}
+  {{< chart "dataset1" "table" >}}
+{{< /block >}}
+
+### Example 2
+
+Firstly define the data you want to display from the front matter:
+
+```toml
+# from page front matter
+[dataset2]
+  fileLink = "content/themes.csv" # path to where csv is stored # this key will in the chart shortcode
+  colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"] # chart colors
+  columnTitles = ["Theme", "Latest Version", "Owner"]
+  title = "Hugo Themes"
+  baseChartOn = 2 # number of column the chart(s) and graph should be drawn from
+  piechart = false
+  doughnutchart = true
+  bargraph = true
+  table = false # show table listing the chart data
+```
+
+#### __Show only a pie and a doughnut chart__
+
+```markdown
+// from page content
+...
+{{</* grid " mt-2" */>}}
+  {{</* chart "dataset2" */>}}
+{{</* /grid */>}}
+...
+```
+
+{{< grid "3 mt-2 mb-2" >}}
+  {{< chart "dataset2" "pie,doughnut" "1" >}}
+{{< /grid >}}
+
+#### Show table only
+
+{{< grid "3 mt-2" >}}
+  {{< chart "dataset2" "table" >}}
+{{< /grid >}}
\ No newline at end of file
diff --git a/exampleSite/content/projects.csv b/exampleSite/content/projects.csv
new file mode 100644
index 0000000..ba00546
--- /dev/null
+++ b/exampleSite/content/projects.csv
@@ -0,0 +1,12 @@
+project 6,alpha,weru
+project 4,beta,dan
+project 4,candidate,dahl
+project y,abandoned,weru
+project 1,alpha,weru
+project 4,beta,ryan
+project 4,candidate,dan
+project y,abandoned,weru
+project 11,alpha,dahl
+project 4,beta,dan
+project 4,candidate,dan
+project A,abandoned,weru
diff --git a/exampleSite/content/themes.csv b/exampleSite/content/themes.csv
new file mode 100644
index 0000000..1de183b
--- /dev/null
+++ b/exampleSite/content/themes.csv
@@ -0,0 +1,4 @@
+clarity,V.1,chipzoller
+compose,V.1,weru
+swift,V.2,weru
+newsroom,V.1,weru

--
Gitblit v1.10.0