Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/VVelox/hugo-dusky-neon-potato.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZane C. Bowers-Hadley <vvelox@vvelox.net>2019-01-22 12:22:03 +0300
committerZane C. Bowers-Hadley <vvelox@vvelox.net>2019-01-22 12:22:03 +0300
commit385b87c37cb491d22aa3acd510b47f30ed707c8b (patch)
tree0c80e2497370c251a506df825d54f399ae704978
parentca2903a6b982db4af851fc88093267cf45a9d21e (diff)
parent95bb93ff447080ce6f1858f44978e6b47354436a (diff)
Merge branch 'devel' of https://github.com/VVelox/hugo-dusky-neon-potato into devel
-rw-r--r--CHANGES.md9
-rw-r--r--README.md120
-rw-r--r--archetypes/default.md2
-rw-r--r--archetypes/default.org2
-rw-r--r--layouts/_default/terms.html5
-rw-r--r--layouts/partials/head.html3
-rw-r--r--layouts/partials/theme-colors.css6
-rw-r--r--layouts/shortcodes/chart-generate.html96
-rw-r--r--layouts/shortcodes/chart-place.html2
-rw-r--r--theme.toml2
10 files changed, 210 insertions, 37 deletions
diff --git a/CHANGES.md b/CHANGES.md
new file mode 100644
index 0000000..4494caa
--- /dev/null
+++ b/CHANGES.md
@@ -0,0 +1,9 @@
+# 2018-09-?/0.1.0
+
+* Add graphing support via [C3.js](https://c3js.org/).
+* Add page level auto-refresh support.
+* Fix misc issues with tag URL rendering.
+
+# 2018-09-10/0.0.0
+
+* Initial release.
diff --git a/README.md b/README.md
index 4da4b2a..38c4396 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@ Outrun with the power of a potato. Based on the Potato Dark theme with CSS bits
* Can turn off pagination.
* The ability to enable sorting of tables for pages.
* Graphing via [C3](https://c3js.org/).
+* Can set a page to refresh via Front Matter.
## Usage
@@ -39,7 +40,7 @@ Use short code for Image Zoom.
### Graphing
-To enable graphing, you first need to set 'graphing' to true in frontmatter
+To enable graphing, you first need to set 'graphing' to true in Front Matter
as below. With out that, none of the shortcodes will work properly as the required
CSS and JS will not be included in the header.
@@ -47,6 +48,96 @@ CSS and JS will not be included in the header.
graphing: true
```
+Currently the possible charts that can be made with out issue are as below.
+
+* line
+* spline
+* bar
+* scatter
+* pie
+* donut
+* gauge
+
+Below is a example of creating a chart.
+
+```
+{{% chart-place chart="example" %}}
+
+{{% chart-generate url="https://foo.bar/c3_test.csv" type="line" chart="example" yLabel="Y1 label" xLabel="X label" %}}
+```
+
+Graphing is handled by [C3](https://c3js.org/) and you can find the documentation at https://c3js.org/reference.html .
+
+#### chart-place
+
+This short code places the HTML that the JS will bind to.
+
+| Variable | Default | Description |
+| --- | --- | --- |
+| chart | chart | The name of the chart. |
+
+#### chart-generate
+
+This generates the chart and binds it to the HTML.
+
+| Variable | Default | Required | Description |
+| --- | --- | --- | --- |
+| [chart](https://c3js.org/reference.html#bindto) | chart | no | The name of the chart. |
+| [url](https://c3js.org/reference.html#data-url) | null | yes | The URL for the CSV. |
+| [type](https://c3js.org/reference.html#data-type) | line | no | The type of chart it is. |
+| [x](https://c3js.org/reference.html#data-x) | null | no | The column name to use for X axis info. |
+| [xLabel](https://c3js.org/reference.html#axis-x-label) | null | no | The label for the X axis. |
+| [yLabel](https://c3js.org/reference.html#axis-y-label) | null | no | The label for the Y axis. |
+| [xType](https://c3js.org/reference.html#axis-x-type) | null | no | The type of data for the X axis. |
+| [xFormat](https://c3js.org/reference.html#axis-x-tick-format) | null | no | The format for the X ticks, largely for use if xType is set to 'timeseries'. |
+| [axis-rotated](https://c3js.org/reference.html#axis-rotated) | null | no | If X and Y should be reversed. |
+| [grid-x-show](https://c3js.org/samples/options_gridline.html) | null | no | If the X grid should be shown. Set to 'true' to enable. |
+| [grid-y-show](https://c3js.org/samples/options_gridline.html) | null | no | If the X grid should be shown. Set to 'true' to enable. |
+| [legend-hide](https://c3js.org/samples/options_legend.html) | null | no | If defined, this hides the legend. |
+| [zoom-enable](https://c3js.org/samples/interaction_zoom.html) | null | no | If defined, this enables zooming. |
+| [zoom-rescale](https://c3js.org/reference.html#zoom-rescale) | null | no | If defined, this enables rescaling when zooming. |
+| [subchart-enable](https://c3js.org/samples/options_subchart.html) | null | no | If defined, this enables shows a sub chart, which can be useful when zooming. |
+| [subchart-size](https://c3js.org/reference.html#subchart-size-height) | null | no | Used for setting a custom subchart size. |
+| [size-height](https://c3js.org/samples/options_size.html) | null | no | Set a specific height for the chart. |
+| [size-width](https://c3js.org/samples/options_size.html) | null | no | Set a specific height for the chart. |
+
+
+Please note that while C3 supports area and gauge, this currently lacks support for those.
+
+#### chart-generate-raw
+
+As to how to start using this, it is highly started reading https://c3js.org/gettingstarted.html .
+
+| Variable | Default | Required | Description |
+| --- | --- | --- | --- |
+| raw | null | yes | The raw inner JSON for c3.generate. |
+
+
+```
+{{% chart-generate-raw raw="bindto: '#chart',
+ data: {
+ columns: [
+ ['data1', 30, 200, 100, 400, 150, 250],
+ ['data2', 50, 20, 10, 40, 15, 25]
+ ]
+ }"
+%}}
+```
+
+is the equivalent of this...
+
+```
+var chart = c3.generate({
+ bindto: '#chart',
+ data: {
+ columns: [
+ ['data1', 30, 200, 100, 400, 150, 250],
+ ['data2', 50, 20, 10, 40, 15, 25]
+ ]
+ }
+});
+```
+
## Configuration
### Disable Pagination
@@ -141,3 +232,30 @@ defaults are shown below.
# text on the graphs
graph-text="#FF00FF"
```
+
+### Page Auto-Refresh
+
+Pages can be told to auto refresh via setting the Front Matter variable 'page_refresh'. This is
+number of seconds between page refreshes.
+
+The use case for this would be if you are using graphing and have data that updates periodically
+want to update the page every 5 minutes or so to pull in the changes.
+
+```
+---
+title: "Auto-Refreshing"
+date: 2018-09-02T22:41:40-05:00
+draft: false
+page_refresh: 300
+---
+
+This page will refresh every 5 minutes.
+
+```
+
+
+## TODO
+
+* Implement more settings for gauge graph type.
+* Add more axis options.
+* Make the nearly invisible black triangles the show up on the graph in some modes disappear.
diff --git a/archetypes/default.md b/archetypes/default.md
index a8db1d1..03aca65 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -4,5 +4,5 @@ date: {{ .Date }}
thumbnail: "path/thumbnail.jpg"
draft: true
sort_tables: false
-no_pagination = false
+no_pagination: false
---
diff --git a/archetypes/default.org b/archetypes/default.org
index d375b15..0ce9114 100644
--- a/archetypes/default.org
+++ b/archetypes/default.org
@@ -4,6 +4,6 @@ date: {{ .Date }}
thumbnail: "path/thumbnail.jpg"
draft: true
sort_tables: false
-no_pagination = false
+no_pagination: false
---
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 6d76e21..39edc71 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,11 +1,10 @@
{{ partial "header.html" . }}
-{{ $baseurl := .Site.BaseURL | sanitizeurl }}
<section>
<h2>{{ .Title }}</h2>
<ul>
{{ $data := .Data }}
- {{ range $key, $value := .Data.Terms }}
- <li><a href="{{ $baseurl }}/{{ $data.Plural }}/{{ $key | urlize }}">{{ $key }}</a> ({{ len $value }})</li>
+ {{ range $key, $value := .Data.Terms.Alphabetical }}
+ <li><a href="{{ $value.Name | urlize }}">{{ $value.Name }} ({{ $value.WeightedPages.Count }})</a></li>
{{ end }}
</ul>
</section>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fa1c94d..488b7e3 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -59,5 +59,8 @@
<script type="text/javascript" src="{{ .Site.BaseURL }}/js/c3.min.js"></script>
<script type="text/javascript" src="{{ .Site.BaseURL }}/js/d3.min.js"></script>
{{ end }}
+ {{ with .Params.page_refresh }}
+ <meta http-equiv="refresh" content="{{.}}">
+ {{ end }}
{{ partial "head_custom.html" . }}
</head>
diff --git a/layouts/partials/theme-colors.css b/layouts/partials/theme-colors.css
index 8fd3539..998d7bb 100644
--- a/layouts/partials/theme-colors.css
+++ b/layouts/partials/theme-colors.css
@@ -278,6 +278,8 @@ blockquote {
}
+/* C3 overrides so bits are not invisible */
+
.c3 path, .c3 line {
stroke: {{ .Param "colors.graph-lines" | default "#66FF00" }};
}
@@ -285,3 +287,7 @@ blockquote {
.c3 text {
stroke: {{ .Param "colors.grap-text" | default "#FF00FF" }};
}
+
+.c3-tooltip td {
+ background-color: {{ .Param "colors.background" | default "#101010" }};
+}
diff --git a/layouts/shortcodes/chart-generate.html b/layouts/shortcodes/chart-generate.html
index dcd4f54..4bb0fa4 100644
--- a/layouts/shortcodes/chart-generate.html
+++ b/layouts/shortcodes/chart-generate.html
@@ -1,34 +1,72 @@
<script>
var chart = c3.generate({
- bindto: '#{{ .Get "chart" }}',
- data: {
- {{ with .Get "x" }}
- x: '{{.}}',
- {{ end }}
- url: '{{ .Get "url" }}',
- type: '{{ .Get "type" }}'
+ bindto: '#{{ .Get "chart" | default "chart" }}',
+ data: {
+ {{ with .Get "x" }}
+ x: '{{.}}',
+ {{ end }}
+ url: '{{ .Get "url" }}',
+ type: '{{ .Get "type" | default "line" }}'
+ }
+ ,axis: {
+ x: {
+ label: '{{ with .Get "xLabel" }}{{.}}{{ end }}'
+
+ {{ with .Get "xType" }}
+ ,type: '{{.}}'
+ {{ end }}
+
+ {{ with .Get "xFormat" }}
+ ,tick: {
+ format: '{{.}}'
+ }
+ {{ end }}
+ }
+
+ {{ with .Get "yLabel" }}
+ ,y: {
+ label: '{{.}}'
+ }
+ {{ end }}
+
+ {{ with .Get "y2Label" }}
+ ,y2: {
+ show: true,
+ label: '{{.}}'
+ }
+ {{ end }}
+
+ {{ with .Get "axis-rotated" }}
+ ,rotated: '{{.}}'
+ {{ end }}
}
- {{ if or (isset .Params "xLabel") (or (isset .Params "yLabel") (isset .Params "y2Label") ) }}
- ,axis: {
- {{ with .Get "xLabel" }}
- x: {
- label: '{{.}}'
- }
- {{ end }}
- {{ if isset .Params "yLabel" }},{{end}}
- {{ with .Get "yLabel" }}
- y: {
- label: '{{.}}'
- }
- {{ end }}
- {{ if isset .Params "y2Label" }},{{end}}
- {{ with .Get "y2Label" }}
- y2: {
- show: true,
- label: '{{.}}'
- }
- {{ end }}
- }
- {{ end }}
+ ,grid: {
+ x: {
+ {{ with .Get "grid-x-show" }}show: '{{.}}'{{ end }}
+ },
+ y: {
+ {{ with .Get "grid-y-show" }}show: '{{.}}'{{ end }}
+ }
+ }
+ ,legend: {
+ {{ with .Get "legend-hide" }}show: false{{ end }}
+ }
+ ,zoom: {
+ {{ if isset .Params "zoom-enable" }}
+ enabled: true
+ {{ with .Get "zoom-rescale" }},rescale: true{{ end }}
+ {{ end }}
+ }
+ ,subchart: {
+ {{ if isset .Params "subchart-enable" }}
+ show: true
+ {{ with .Get "subchart-size" }},size: { height: '{{.}}' }{{ end }}
+ {{ end }}
+ }
+ ,size: {
+ {{ with .Get "size-height" }}height: '{{.}}'{{ end }}
+ {{ if and ( isset .Params "size-width" ) ( isset .Params "size-height" ) }},{{ end }}
+ {{ with .Get "size-width" }}width: '{{.}}'{{ end }}
+ }
});
</script>
diff --git a/layouts/shortcodes/chart-place.html b/layouts/shortcodes/chart-place.html
index cf3668d..82313af 100644
--- a/layouts/shortcodes/chart-place.html
+++ b/layouts/shortcodes/chart-place.html
@@ -1,2 +1,2 @@
-<div id="{{ .Get "chart" }}"></div>
+<div id="{{ .Get "chart" | default "chart" }}"></div>
diff --git a/theme.toml b/theme.toml
index bc7e334..9ec4f83 100644
--- a/theme.toml
+++ b/theme.toml
@@ -7,7 +7,7 @@ tags = ["Responsive", "Blog", "Google analytics", "Disqus", "Clean", "Tags", "Mi
features = ["blog", "sortable tables", "image zoom", "optional pagination"]
min_version = 0.27
[author]
- name = "Dusky Neon Potato"
+ name = "Zane C. Bowers-Hadley"
homepage = "https://github.com/VVelox/hugo-dusky-neon-potato"
[original]
author="Suraj Mandal"