From: Vladimír Vondruš Date: Mon, 18 Jun 2018 23:23:53 +0000 (+0200) Subject: m.dot: new highly experimental graph drawing plugin. X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=7e45f9bef4501447557d9c1016ccb9077efcdbcd;p=blog.git m.dot: new highly experimental graph drawing plugin. --- diff --git a/css/m-components.css b/css/m-components.css index 2c8ddd4c..8990bf0b 100644 --- a/css/m-components.css +++ b/css/m-components.css @@ -962,13 +962,10 @@ div.m-button.m-default a:active svg.m-math { fill: var(--link-active-color); } -/* Plots */ -div.m-plot svg { - text-align: center; -} -div.m-plot .m-background { - fill: var(--plot-background-color); -} +/* Plots, graphs */ +div.m-plot, div.m-graph { text-align: center; } +div.m-plot svg, div.m-graph svg { max-width: 100%; } +div.m-plot .m-background { fill: var(--plot-background-color); } /* Font sizes are hardcoded in m.plots, change there first! */ div.m-plot svg .m-label { font-size: 11px; } div.m-plot svg .m-title { font-size: 13px; } @@ -982,51 +979,239 @@ div.m-plot svg .m-error { stroke-width: 1.5; } div.m-plot svg .m-label.m-dim { fill: var(--dim-color); } +div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse, +div.m-graph svg g.m-node.m-flat polygon { + fill: none; +} +div.m-graph svg g.m-node:not(.m-flat) text { + fill: var(--button-background-color); +} -/* Colored math block, inline math, colored math parts, plots */ +/* Colored math block, inline math, colored math parts, plots and + global-colored graphs. Should be before local graph coloring, so the latter + can override this. */ div.m-math svg, svg.m-math { fill: var(--color); } div.m-math.m-default svg, svg.m-math.m-default, div.m-math svg g.m-default, svg.m-math g.m-default, div.m-math svg rect.m-default, svg.m-math rect.m-default, -div.m-plot svg .m-bar.m-default { +div.m-plot svg .m-bar.m-default, +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-node:not(.m-flat) ellipse, +div.m-graph svg g.m-node:not(.m-flat) polygon, +div.m-graph svg g.m-edge text, +div.m-graph svg g.m-node.m-flat text, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-default svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-default svg g.m-edge text, +div.m-graph.m-default svg g.m-node.m-flat text { fill: var(--default-color); } +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-edge path, +div.m-graph svg g.m-node ellipse, +div.m-graph svg g.m-node polygon, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-edge path, +div.m-graph.m-default svg g.m-node ellipse, +div.m-graph.m-default svg g.m-node polygon { + stroke: var(--default-color); +} div.m-math.m-primary svg, svg.m-math.m-primary, div.m-math svg g.m-primary, svg.m-math g.m-primary, div.m-math svg rect.m-primary, svg.m-math rect.m-primary, -div.m-plot svg .m-bar.m-primary { +div.m-plot svg .m-bar.m-primary, +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-primary svg g.m-edge text, +div.m-graph.m-primary svg g.m-node.m-flat text { fill: var(--primary-color); } +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-edge path, +div.m-graph.m-primary svg g.m-node ellipse, +div.m-graph.m-primary svg g.m-node polygon { + stroke: var(--primary-color); +} div.m-math.m-success svg, svg.m-math.m-success, div.m-math svg g.m-success, svg.m-math g.m-success, div.m-math svg rect.m-success, svg.m-math rect.m-success, -div.m-plot svg .m-bar.m-success { +div.m-plot svg .m-bar.m-success, +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-success svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-success svg g.m-edge text, +div.m-graph.m-success svg g.m-node.m-flat text { fill: var(--success-color); } +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-edge path, +div.m-graph.m-success svg g.m-node ellipse, +div.m-graph.m-success svg g.m-node polygon { + stroke: var(--success-color); +} div.m-math.m-warning svg, svg.m-math.m-warning, div.m-math svg g.m-warning, svg.m-math g.m-warning, div.m-math svg rect.m-warning, svg.m-math rect.m-warning, -div.m-plot svg .m-bar.m-warning { +div.m-plot svg .m-bar.m-warning, +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-warning svg g.m-edge text, +div.m-graph.m-warning svg g.m-node.m-flat text { fill: var(--warning-color); } +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-edge path, +div.m-graph.m-warning svg g.m-node ellipse, +div.m-graph.m-warning svg g.m-node polygon { + stroke: var(--warning-color); +} div.m-math.m-danger svg, svg.m-math.m-danger, div.m-math svg g.m-danger, svg.m-math g.m-danger, div.m-math svg rect.m-danger, svg.m-math rect.m-danger, -div.m-plot svg .m-bar.m-danger { +div.m-plot svg .m-bar.m-danger, +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-danger svg g.m-edge text, +div.m-graph.m-danger svg g.m-node.m-flat text { fill: var(--danger-color); } +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-edge path, +div.m-graph.m-danger svg g.m-node ellipse, +div.m-graph.m-danger svg g.m-node polygon { + stroke: var(--danger-color); +} div.m-math.m-info svg, svg.m-math.m-info, div.m-math svg g.m-info, svg.m-math g.m-info, div.m-math svg rect.m-info, svg.m-math rect.m-info, -div.m-plot svg .m-bar.m-info { +div.m-plot svg .m-bar.m-info, +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-info svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-info svg g.m-edge text, +div.m-graph.m-info svg g.m-node.m-flat text { fill: var(--info-color); } +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-edge path, +div.m-graph.m-info svg g.m-node ellipse, +div.m-graph.m-info svg g.m-node polygon { + stroke: var(--info-color); +} div.m-math.m-dim svg, svg.m-math.m-dim, div.m-math svg g.m-dim, svg.m-math g.m-dim, div.m-math svg rect.m-dim, svg.m-math rect.m-dim, -div.m-plot svg .m-bar.m-dim { +div.m-plot svg .m-bar.m-dim, +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-dim svg g.m-edge text, +div.m-graph.m-dim svg g.m-node.m-flat text { + fill: var(--dim-color); +} +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-edge path, +div.m-graph.m-dim svg g.m-node ellipse, +div.m-graph.m-dim svg g.m-node polygon { + stroke: var(--dim-color); +} + +/* Local-colored graphs. Later so it overrides global coloring. */ +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-default:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-default text, +div.m-graph svg g.m-node.m-default.m-flat text { + fill: var(--default-color); +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-edge.m-default path, +div.m-graph svg g.m-node.m-default ellipse, +div.m-graph svg g.m-node.m-default polygon { + stroke: var(--default-color); +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-primary text, +div.m-graph svg g.m-node.m-primary.m-flat text { + fill: var(--primary-color); +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-edge.m-primary path, +div.m-graph svg g.m-node.m-primary ellipse, +div.m-graph svg g.m-node.m-primary polygon { + stroke: var(--primary-color); +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-success:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-success text, +div.m-graph svg g.m-node.m-success.m-flat text { + fill: var(--success-color); +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-edge.m-success path, +div.m-graph svg g.m-node.m-success ellipse, +div.m-graph svg g.m-node.m-success polygon { + stroke: var(--success-color); +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-warning text, +div.m-graph svg g.m-node.m-warning.m-flat text { + fill: var(--warning-color); +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-edge.m-warning path, +div.m-graph svg g.m-node.m-warning ellipse, +div.m-graph svg g.m-node.m-warning polygon { + stroke: var(--warning-color); +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-danger text, +div.m-graph svg g.m-node.m-danger.m-flat text { + fill: var(--danger-color); +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-edge.m-danger path, +div.m-graph svg g.m-node.m-danger ellipse, +div.m-graph svg g.m-node.m-danger polygon { + stroke: var(--danger-color); +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-info:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-info text, +div.m-graph svg g.m-node.m-info.m-flat text { + fill: var(--info-color); +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-edge.m-info path, +div.m-graph svg g.m-node.m-info ellipse, +div.m-graph svg g.m-node.m-info polygon { + stroke: var(--info-color); +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-dim text, +div.m-graph svg g.m-node.m-dim.m-flat text { fill: var(--dim-color); } +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-edge.m-dim path, +div.m-graph svg g.m-node.m-dim ellipse, +div.m-graph svg g.m-node.m-dim polygon { + stroke: var(--dim-color); +} /* Spacing after every block element, but not after the last and not when m-nopadb is specified */ diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css index 2621a41e..577ccffc 100644 --- a/css/m-dark+doxygen.compiled.css +++ b/css/m-dark+doxygen.compiled.css @@ -1268,12 +1268,9 @@ div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-mat div.m-button.m-default a:active svg.m-math { fill: #a5c9ea; } -div.m-plot svg { - text-align: center; -} -div.m-plot .m-background { - fill: #34424d; -} +div.m-plot, div.m-graph { text-align: center; } +div.m-plot svg, div.m-graph svg { max-width: 100%; } +div.m-plot .m-background { fill: #34424d; } div.m-plot svg .m-label { font-size: 11px; } div.m-plot svg .m-title { font-size: 13px; } div.m-plot svg .m-label, div.m-plot svg .m-title { fill: #dcdcdc; } @@ -1286,49 +1283,233 @@ div.m-plot svg .m-error { stroke-width: 1.5; } div.m-plot svg .m-label.m-dim { fill: #747474; } +div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse, +div.m-graph svg g.m-node.m-flat polygon { + fill: none; +} +div.m-graph svg g.m-node:not(.m-flat) text { + fill: #22272e; +} div.m-math svg, svg.m-math { fill: #dcdcdc; } div.m-math.m-default svg, svg.m-math.m-default, div.m-math svg g.m-default, svg.m-math g.m-default, div.m-math svg rect.m-default, svg.m-math rect.m-default, -div.m-plot svg .m-bar.m-default { +div.m-plot svg .m-bar.m-default, +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-node:not(.m-flat) ellipse, +div.m-graph svg g.m-node:not(.m-flat) polygon, +div.m-graph svg g.m-edge text, +div.m-graph svg g.m-node.m-flat text, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-default svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-default svg g.m-edge text, +div.m-graph.m-default svg g.m-node.m-flat text { fill: #dcdcdc; } +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-edge path, +div.m-graph svg g.m-node ellipse, +div.m-graph svg g.m-node polygon, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-edge path, +div.m-graph.m-default svg g.m-node ellipse, +div.m-graph.m-default svg g.m-node polygon { + stroke: #dcdcdc; +} div.m-math.m-primary svg, svg.m-math.m-primary, div.m-math svg g.m-primary, svg.m-math g.m-primary, div.m-math svg rect.m-primary, svg.m-math rect.m-primary, -div.m-plot svg .m-bar.m-primary { +div.m-plot svg .m-bar.m-primary, +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-primary svg g.m-edge text, +div.m-graph.m-primary svg g.m-node.m-flat text { fill: #a5c9ea; } +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-edge path, +div.m-graph.m-primary svg g.m-node ellipse, +div.m-graph.m-primary svg g.m-node polygon { + stroke: #a5c9ea; +} div.m-math.m-success svg, svg.m-math.m-success, div.m-math svg g.m-success, svg.m-math g.m-success, div.m-math svg rect.m-success, svg.m-math rect.m-success, -div.m-plot svg .m-bar.m-success { +div.m-plot svg .m-bar.m-success, +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-success svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-success svg g.m-edge text, +div.m-graph.m-success svg g.m-node.m-flat text { fill: #3bd267; } +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-edge path, +div.m-graph.m-success svg g.m-node ellipse, +div.m-graph.m-success svg g.m-node polygon { + stroke: #3bd267; +} div.m-math.m-warning svg, svg.m-math.m-warning, div.m-math svg g.m-warning, svg.m-math g.m-warning, div.m-math svg rect.m-warning, svg.m-math rect.m-warning, -div.m-plot svg .m-bar.m-warning { +div.m-plot svg .m-bar.m-warning, +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-warning svg g.m-edge text, +div.m-graph.m-warning svg g.m-node.m-flat text { fill: #c7cf2f; } +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-edge path, +div.m-graph.m-warning svg g.m-node ellipse, +div.m-graph.m-warning svg g.m-node polygon { + stroke: #c7cf2f; +} div.m-math.m-danger svg, svg.m-math.m-danger, div.m-math svg g.m-danger, svg.m-math g.m-danger, div.m-math svg rect.m-danger, svg.m-math rect.m-danger, -div.m-plot svg .m-bar.m-danger { +div.m-plot svg .m-bar.m-danger, +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-danger svg g.m-edge text, +div.m-graph.m-danger svg g.m-node.m-flat text { fill: #cd3431; } +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-edge path, +div.m-graph.m-danger svg g.m-node ellipse, +div.m-graph.m-danger svg g.m-node polygon { + stroke: #cd3431; +} div.m-math.m-info svg, svg.m-math.m-info, div.m-math svg g.m-info, svg.m-math g.m-info, div.m-math svg rect.m-info, svg.m-math rect.m-info, -div.m-plot svg .m-bar.m-info { +div.m-plot svg .m-bar.m-info, +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-info svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-info svg g.m-edge text, +div.m-graph.m-info svg g.m-node.m-flat text { fill: #2f83cc; } +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-edge path, +div.m-graph.m-info svg g.m-node ellipse, +div.m-graph.m-info svg g.m-node polygon { + stroke: #2f83cc; +} div.m-math.m-dim svg, svg.m-math.m-dim, div.m-math svg g.m-dim, svg.m-math g.m-dim, div.m-math svg rect.m-dim, svg.m-math rect.m-dim, -div.m-plot svg .m-bar.m-dim { +div.m-plot svg .m-bar.m-dim, +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-dim svg g.m-edge text, +div.m-graph.m-dim svg g.m-node.m-flat text { fill: #747474; } +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-edge path, +div.m-graph.m-dim svg g.m-node ellipse, +div.m-graph.m-dim svg g.m-node polygon { + stroke: #747474; +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-default:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-default text, +div.m-graph svg g.m-node.m-default.m-flat text { + fill: #dcdcdc; +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-edge.m-default path, +div.m-graph svg g.m-node.m-default ellipse, +div.m-graph svg g.m-node.m-default polygon { + stroke: #dcdcdc; +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-primary text, +div.m-graph svg g.m-node.m-primary.m-flat text { + fill: #a5c9ea; +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-edge.m-primary path, +div.m-graph svg g.m-node.m-primary ellipse, +div.m-graph svg g.m-node.m-primary polygon { + stroke: #a5c9ea; +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-success:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-success text, +div.m-graph svg g.m-node.m-success.m-flat text { + fill: #3bd267; +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-edge.m-success path, +div.m-graph svg g.m-node.m-success ellipse, +div.m-graph svg g.m-node.m-success polygon { + stroke: #3bd267; +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-warning text, +div.m-graph svg g.m-node.m-warning.m-flat text { + fill: #c7cf2f; +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-edge.m-warning path, +div.m-graph svg g.m-node.m-warning ellipse, +div.m-graph svg g.m-node.m-warning polygon { + stroke: #c7cf2f; +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-danger text, +div.m-graph svg g.m-node.m-danger.m-flat text { + fill: #cd3431; +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-edge.m-danger path, +div.m-graph svg g.m-node.m-danger ellipse, +div.m-graph svg g.m-node.m-danger polygon { + stroke: #cd3431; +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-info:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-info text, +div.m-graph svg g.m-node.m-info.m-flat text { + fill: #2f83cc; +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-edge.m-info path, +div.m-graph svg g.m-node.m-info ellipse, +div.m-graph svg g.m-node.m-info polygon { + stroke: #2f83cc; +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-dim text, +div.m-graph svg g.m-node.m-dim.m-flat text { + fill: #747474; +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-edge.m-dim path, +div.m-graph svg g.m-node.m-dim ellipse, +div.m-graph svg g.m-node.m-dim polygon { + stroke: #747474; +} p, ul, ol, dl, blockquote, pre, figure.m-code-figure, figure.m-console-figure, hr, .m-note, .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image, img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math { diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css index 9df06a75..bcb33b6b 100644 --- a/css/m-dark.compiled.css +++ b/css/m-dark.compiled.css @@ -1268,12 +1268,9 @@ div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-mat div.m-button.m-default a:active svg.m-math { fill: #a5c9ea; } -div.m-plot svg { - text-align: center; -} -div.m-plot .m-background { - fill: #34424d; -} +div.m-plot, div.m-graph { text-align: center; } +div.m-plot svg, div.m-graph svg { max-width: 100%; } +div.m-plot .m-background { fill: #34424d; } div.m-plot svg .m-label { font-size: 11px; } div.m-plot svg .m-title { font-size: 13px; } div.m-plot svg .m-label, div.m-plot svg .m-title { fill: #dcdcdc; } @@ -1286,49 +1283,233 @@ div.m-plot svg .m-error { stroke-width: 1.5; } div.m-plot svg .m-label.m-dim { fill: #747474; } +div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse, +div.m-graph svg g.m-node.m-flat polygon { + fill: none; +} +div.m-graph svg g.m-node:not(.m-flat) text { + fill: #22272e; +} div.m-math svg, svg.m-math { fill: #dcdcdc; } div.m-math.m-default svg, svg.m-math.m-default, div.m-math svg g.m-default, svg.m-math g.m-default, div.m-math svg rect.m-default, svg.m-math rect.m-default, -div.m-plot svg .m-bar.m-default { +div.m-plot svg .m-bar.m-default, +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-node:not(.m-flat) ellipse, +div.m-graph svg g.m-node:not(.m-flat) polygon, +div.m-graph svg g.m-edge text, +div.m-graph svg g.m-node.m-flat text, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-default svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-default svg g.m-edge text, +div.m-graph.m-default svg g.m-node.m-flat text { fill: #dcdcdc; } +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-edge path, +div.m-graph svg g.m-node ellipse, +div.m-graph svg g.m-node polygon, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-edge path, +div.m-graph.m-default svg g.m-node ellipse, +div.m-graph.m-default svg g.m-node polygon { + stroke: #dcdcdc; +} div.m-math.m-primary svg, svg.m-math.m-primary, div.m-math svg g.m-primary, svg.m-math g.m-primary, div.m-math svg rect.m-primary, svg.m-math rect.m-primary, -div.m-plot svg .m-bar.m-primary { +div.m-plot svg .m-bar.m-primary, +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-primary svg g.m-edge text, +div.m-graph.m-primary svg g.m-node.m-flat text { fill: #a5c9ea; } +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-edge path, +div.m-graph.m-primary svg g.m-node ellipse, +div.m-graph.m-primary svg g.m-node polygon { + stroke: #a5c9ea; +} div.m-math.m-success svg, svg.m-math.m-success, div.m-math svg g.m-success, svg.m-math g.m-success, div.m-math svg rect.m-success, svg.m-math rect.m-success, -div.m-plot svg .m-bar.m-success { +div.m-plot svg .m-bar.m-success, +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-success svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-success svg g.m-edge text, +div.m-graph.m-success svg g.m-node.m-flat text { fill: #3bd267; } +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-edge path, +div.m-graph.m-success svg g.m-node ellipse, +div.m-graph.m-success svg g.m-node polygon { + stroke: #3bd267; +} div.m-math.m-warning svg, svg.m-math.m-warning, div.m-math svg g.m-warning, svg.m-math g.m-warning, div.m-math svg rect.m-warning, svg.m-math rect.m-warning, -div.m-plot svg .m-bar.m-warning { +div.m-plot svg .m-bar.m-warning, +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-warning svg g.m-edge text, +div.m-graph.m-warning svg g.m-node.m-flat text { fill: #c7cf2f; } +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-edge path, +div.m-graph.m-warning svg g.m-node ellipse, +div.m-graph.m-warning svg g.m-node polygon { + stroke: #c7cf2f; +} div.m-math.m-danger svg, svg.m-math.m-danger, div.m-math svg g.m-danger, svg.m-math g.m-danger, div.m-math svg rect.m-danger, svg.m-math rect.m-danger, -div.m-plot svg .m-bar.m-danger { +div.m-plot svg .m-bar.m-danger, +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-danger svg g.m-edge text, +div.m-graph.m-danger svg g.m-node.m-flat text { fill: #cd3431; } +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-edge path, +div.m-graph.m-danger svg g.m-node ellipse, +div.m-graph.m-danger svg g.m-node polygon { + stroke: #cd3431; +} div.m-math.m-info svg, svg.m-math.m-info, div.m-math svg g.m-info, svg.m-math g.m-info, div.m-math svg rect.m-info, svg.m-math rect.m-info, -div.m-plot svg .m-bar.m-info { +div.m-plot svg .m-bar.m-info, +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-info svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-info svg g.m-edge text, +div.m-graph.m-info svg g.m-node.m-flat text { fill: #2f83cc; } +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-edge path, +div.m-graph.m-info svg g.m-node ellipse, +div.m-graph.m-info svg g.m-node polygon { + stroke: #2f83cc; +} div.m-math.m-dim svg, svg.m-math.m-dim, div.m-math svg g.m-dim, svg.m-math g.m-dim, div.m-math svg rect.m-dim, svg.m-math rect.m-dim, -div.m-plot svg .m-bar.m-dim { +div.m-plot svg .m-bar.m-dim, +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-dim svg g.m-edge text, +div.m-graph.m-dim svg g.m-node.m-flat text { fill: #747474; } +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-edge path, +div.m-graph.m-dim svg g.m-node ellipse, +div.m-graph.m-dim svg g.m-node polygon { + stroke: #747474; +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-default:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-default text, +div.m-graph svg g.m-node.m-default.m-flat text { + fill: #dcdcdc; +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-edge.m-default path, +div.m-graph svg g.m-node.m-default ellipse, +div.m-graph svg g.m-node.m-default polygon { + stroke: #dcdcdc; +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-primary text, +div.m-graph svg g.m-node.m-primary.m-flat text { + fill: #a5c9ea; +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-edge.m-primary path, +div.m-graph svg g.m-node.m-primary ellipse, +div.m-graph svg g.m-node.m-primary polygon { + stroke: #a5c9ea; +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-success:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-success text, +div.m-graph svg g.m-node.m-success.m-flat text { + fill: #3bd267; +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-edge.m-success path, +div.m-graph svg g.m-node.m-success ellipse, +div.m-graph svg g.m-node.m-success polygon { + stroke: #3bd267; +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-warning text, +div.m-graph svg g.m-node.m-warning.m-flat text { + fill: #c7cf2f; +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-edge.m-warning path, +div.m-graph svg g.m-node.m-warning ellipse, +div.m-graph svg g.m-node.m-warning polygon { + stroke: #c7cf2f; +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-danger text, +div.m-graph svg g.m-node.m-danger.m-flat text { + fill: #cd3431; +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-edge.m-danger path, +div.m-graph svg g.m-node.m-danger ellipse, +div.m-graph svg g.m-node.m-danger polygon { + stroke: #cd3431; +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-info:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-info text, +div.m-graph svg g.m-node.m-info.m-flat text { + fill: #2f83cc; +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-edge.m-info path, +div.m-graph svg g.m-node.m-info ellipse, +div.m-graph svg g.m-node.m-info polygon { + stroke: #2f83cc; +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-dim text, +div.m-graph svg g.m-node.m-dim.m-flat text { + fill: #747474; +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-edge.m-dim path, +div.m-graph svg g.m-node.m-dim ellipse, +div.m-graph svg g.m-node.m-dim polygon { + stroke: #747474; +} p, ul, ol, dl, blockquote, pre, figure.m-code-figure, figure.m-console-figure, hr, .m-note, .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image, img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math { diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css index 67517091..30e657e3 100644 --- a/css/m-light+doxygen.compiled.css +++ b/css/m-light+doxygen.compiled.css @@ -1268,12 +1268,9 @@ div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-mat div.m-button.m-default a:active svg.m-math { fill: #cb4b16; } -div.m-plot svg { - text-align: center; -} -div.m-plot .m-background { - fill: #fbf0ec; -} +div.m-plot, div.m-graph { text-align: center; } +div.m-plot svg, div.m-graph svg { max-width: 100%; } +div.m-plot .m-background { fill: #fbf0ec; } div.m-plot svg .m-label { font-size: 11px; } div.m-plot svg .m-title { font-size: 13px; } div.m-plot svg .m-label, div.m-plot svg .m-title { fill: #000000; } @@ -1286,49 +1283,233 @@ div.m-plot svg .m-error { stroke-width: 1.5; } div.m-plot svg .m-label.m-dim { fill: #bdbdbd; } +div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse, +div.m-graph svg g.m-node.m-flat polygon { + fill: none; +} +div.m-graph svg g.m-node:not(.m-flat) text { + fill: #ffffff; +} div.m-math svg, svg.m-math { fill: #000000; } div.m-math.m-default svg, svg.m-math.m-default, div.m-math svg g.m-default, svg.m-math g.m-default, div.m-math svg rect.m-default, svg.m-math rect.m-default, -div.m-plot svg .m-bar.m-default { +div.m-plot svg .m-bar.m-default, +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-node:not(.m-flat) ellipse, +div.m-graph svg g.m-node:not(.m-flat) polygon, +div.m-graph svg g.m-edge text, +div.m-graph svg g.m-node.m-flat text, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-default svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-default svg g.m-edge text, +div.m-graph.m-default svg g.m-node.m-flat text { fill: #000000; } +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-edge path, +div.m-graph svg g.m-node ellipse, +div.m-graph svg g.m-node polygon, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-edge path, +div.m-graph.m-default svg g.m-node ellipse, +div.m-graph.m-default svg g.m-node polygon { + stroke: #000000; +} div.m-math.m-primary svg, svg.m-math.m-primary, div.m-math svg g.m-primary, svg.m-math g.m-primary, div.m-math svg rect.m-primary, svg.m-math rect.m-primary, -div.m-plot svg .m-bar.m-primary { +div.m-plot svg .m-bar.m-primary, +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-primary svg g.m-edge text, +div.m-graph.m-primary svg g.m-node.m-flat text { fill: #cb4b16; } +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-edge path, +div.m-graph.m-primary svg g.m-node ellipse, +div.m-graph.m-primary svg g.m-node polygon { + stroke: #cb4b16; +} div.m-math.m-success svg, svg.m-math.m-success, div.m-math svg g.m-success, svg.m-math g.m-success, div.m-math svg rect.m-success, svg.m-math rect.m-success, -div.m-plot svg .m-bar.m-success { +div.m-plot svg .m-bar.m-success, +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-success svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-success svg g.m-edge text, +div.m-graph.m-success svg g.m-node.m-flat text { fill: #31c25d; } +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-edge path, +div.m-graph.m-success svg g.m-node ellipse, +div.m-graph.m-success svg g.m-node polygon { + stroke: #31c25d; +} div.m-math.m-warning svg, svg.m-math.m-warning, div.m-math svg g.m-warning, svg.m-math g.m-warning, div.m-math svg rect.m-warning, svg.m-math rect.m-warning, -div.m-plot svg .m-bar.m-warning { +div.m-plot svg .m-bar.m-warning, +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-warning svg g.m-edge text, +div.m-graph.m-warning svg g.m-node.m-flat text { fill: #c7cf2f; } +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-edge path, +div.m-graph.m-warning svg g.m-node ellipse, +div.m-graph.m-warning svg g.m-node polygon { + stroke: #c7cf2f; +} div.m-math.m-danger svg, svg.m-math.m-danger, div.m-math svg g.m-danger, svg.m-math g.m-danger, div.m-math svg rect.m-danger, svg.m-math rect.m-danger, -div.m-plot svg .m-bar.m-danger { +div.m-plot svg .m-bar.m-danger, +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-danger svg g.m-edge text, +div.m-graph.m-danger svg g.m-node.m-flat text { fill: #f60000; } +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-edge path, +div.m-graph.m-danger svg g.m-node ellipse, +div.m-graph.m-danger svg g.m-node polygon { + stroke: #f60000; +} div.m-math.m-info svg, svg.m-math.m-info, div.m-math svg g.m-info, svg.m-math g.m-info, div.m-math svg rect.m-info, svg.m-math rect.m-info, -div.m-plot svg .m-bar.m-info { +div.m-plot svg .m-bar.m-info, +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-info svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-info svg g.m-edge text, +div.m-graph.m-info svg g.m-node.m-flat text { fill: #2e7dc5; } +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-edge path, +div.m-graph.m-info svg g.m-node ellipse, +div.m-graph.m-info svg g.m-node polygon { + stroke: #2e7dc5; +} div.m-math.m-dim svg, svg.m-math.m-dim, div.m-math svg g.m-dim, svg.m-math g.m-dim, div.m-math svg rect.m-dim, svg.m-math rect.m-dim, -div.m-plot svg .m-bar.m-dim { +div.m-plot svg .m-bar.m-dim, +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-dim svg g.m-edge text, +div.m-graph.m-dim svg g.m-node.m-flat text { fill: #bdbdbd; } +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-edge path, +div.m-graph.m-dim svg g.m-node ellipse, +div.m-graph.m-dim svg g.m-node polygon { + stroke: #bdbdbd; +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-default:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-default text, +div.m-graph svg g.m-node.m-default.m-flat text { + fill: #000000; +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-edge.m-default path, +div.m-graph svg g.m-node.m-default ellipse, +div.m-graph svg g.m-node.m-default polygon { + stroke: #000000; +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-primary text, +div.m-graph svg g.m-node.m-primary.m-flat text { + fill: #cb4b16; +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-edge.m-primary path, +div.m-graph svg g.m-node.m-primary ellipse, +div.m-graph svg g.m-node.m-primary polygon { + stroke: #cb4b16; +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-success:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-success text, +div.m-graph svg g.m-node.m-success.m-flat text { + fill: #31c25d; +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-edge.m-success path, +div.m-graph svg g.m-node.m-success ellipse, +div.m-graph svg g.m-node.m-success polygon { + stroke: #31c25d; +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-warning text, +div.m-graph svg g.m-node.m-warning.m-flat text { + fill: #c7cf2f; +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-edge.m-warning path, +div.m-graph svg g.m-node.m-warning ellipse, +div.m-graph svg g.m-node.m-warning polygon { + stroke: #c7cf2f; +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-danger text, +div.m-graph svg g.m-node.m-danger.m-flat text { + fill: #f60000; +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-edge.m-danger path, +div.m-graph svg g.m-node.m-danger ellipse, +div.m-graph svg g.m-node.m-danger polygon { + stroke: #f60000; +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-info:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-info text, +div.m-graph svg g.m-node.m-info.m-flat text { + fill: #2e7dc5; +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-edge.m-info path, +div.m-graph svg g.m-node.m-info ellipse, +div.m-graph svg g.m-node.m-info polygon { + stroke: #2e7dc5; +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-dim text, +div.m-graph svg g.m-node.m-dim.m-flat text { + fill: #bdbdbd; +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-edge.m-dim path, +div.m-graph svg g.m-node.m-dim ellipse, +div.m-graph svg g.m-node.m-dim polygon { + stroke: #bdbdbd; +} p, ul, ol, dl, blockquote, pre, figure.m-code-figure, figure.m-console-figure, hr, .m-note, .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image, img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math { diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css index ace533f7..a2ef11c8 100644 --- a/css/m-light.compiled.css +++ b/css/m-light.compiled.css @@ -1268,12 +1268,9 @@ div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-mat div.m-button.m-default a:active svg.m-math { fill: #cb4b16; } -div.m-plot svg { - text-align: center; -} -div.m-plot .m-background { - fill: #fbf0ec; -} +div.m-plot, div.m-graph { text-align: center; } +div.m-plot svg, div.m-graph svg { max-width: 100%; } +div.m-plot .m-background { fill: #fbf0ec; } div.m-plot svg .m-label { font-size: 11px; } div.m-plot svg .m-title { font-size: 13px; } div.m-plot svg .m-label, div.m-plot svg .m-title { fill: #000000; } @@ -1286,49 +1283,233 @@ div.m-plot svg .m-error { stroke-width: 1.5; } div.m-plot svg .m-label.m-dim { fill: #bdbdbd; } +div.m-graph svg g.m-edge path, div.m-graph svg g.m-node.m-flat ellipse, +div.m-graph svg g.m-node.m-flat polygon { + fill: none; +} +div.m-graph svg g.m-node:not(.m-flat) text { + fill: #ffffff; +} div.m-math svg, svg.m-math { fill: #000000; } div.m-math.m-default svg, svg.m-math.m-default, div.m-math svg g.m-default, svg.m-math g.m-default, div.m-math svg rect.m-default, svg.m-math rect.m-default, -div.m-plot svg .m-bar.m-default { +div.m-plot svg .m-bar.m-default, +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-node:not(.m-flat) ellipse, +div.m-graph svg g.m-node:not(.m-flat) polygon, +div.m-graph svg g.m-edge text, +div.m-graph svg g.m-node.m-flat text, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-default svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-default svg g.m-edge text, +div.m-graph.m-default svg g.m-node.m-flat text { fill: #000000; } +div.m-graph svg g.m-edge polygon, +div.m-graph svg g.m-edge path, +div.m-graph svg g.m-node ellipse, +div.m-graph svg g.m-node polygon, +div.m-graph.m-default svg g.m-edge polygon, +div.m-graph.m-default svg g.m-edge path, +div.m-graph.m-default svg g.m-node ellipse, +div.m-graph.m-default svg g.m-node polygon { + stroke: #000000; +} div.m-math.m-primary svg, svg.m-math.m-primary, div.m-math svg g.m-primary, svg.m-math g.m-primary, div.m-math svg rect.m-primary, svg.m-math rect.m-primary, -div.m-plot svg .m-bar.m-primary { +div.m-plot svg .m-bar.m-primary, +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-primary svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-primary svg g.m-edge text, +div.m-graph.m-primary svg g.m-node.m-flat text { fill: #cb4b16; } +div.m-graph.m-primary svg g.m-edge polygon, +div.m-graph.m-primary svg g.m-edge path, +div.m-graph.m-primary svg g.m-node ellipse, +div.m-graph.m-primary svg g.m-node polygon { + stroke: #cb4b16; +} div.m-math.m-success svg, svg.m-math.m-success, div.m-math svg g.m-success, svg.m-math g.m-success, div.m-math svg rect.m-success, svg.m-math rect.m-success, -div.m-plot svg .m-bar.m-success { +div.m-plot svg .m-bar.m-success, +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-success svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-success svg g.m-edge text, +div.m-graph.m-success svg g.m-node.m-flat text { fill: #31c25d; } +div.m-graph.m-success svg g.m-edge polygon, +div.m-graph.m-success svg g.m-edge path, +div.m-graph.m-success svg g.m-node ellipse, +div.m-graph.m-success svg g.m-node polygon { + stroke: #31c25d; +} div.m-math.m-warning svg, svg.m-math.m-warning, div.m-math svg g.m-warning, svg.m-math g.m-warning, div.m-math svg rect.m-warning, svg.m-math rect.m-warning, -div.m-plot svg .m-bar.m-warning { +div.m-plot svg .m-bar.m-warning, +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-warning svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-warning svg g.m-edge text, +div.m-graph.m-warning svg g.m-node.m-flat text { fill: #c7cf2f; } +div.m-graph.m-warning svg g.m-edge polygon, +div.m-graph.m-warning svg g.m-edge path, +div.m-graph.m-warning svg g.m-node ellipse, +div.m-graph.m-warning svg g.m-node polygon { + stroke: #c7cf2f; +} div.m-math.m-danger svg, svg.m-math.m-danger, div.m-math svg g.m-danger, svg.m-math g.m-danger, div.m-math svg rect.m-danger, svg.m-math rect.m-danger, -div.m-plot svg .m-bar.m-danger { +div.m-plot svg .m-bar.m-danger, +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-danger svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-danger svg g.m-edge text, +div.m-graph.m-danger svg g.m-node.m-flat text { fill: #f60000; } +div.m-graph.m-danger svg g.m-edge polygon, +div.m-graph.m-danger svg g.m-edge path, +div.m-graph.m-danger svg g.m-node ellipse, +div.m-graph.m-danger svg g.m-node polygon { + stroke: #f60000; +} div.m-math.m-info svg, svg.m-math.m-info, div.m-math svg g.m-info, svg.m-math g.m-info, div.m-math svg rect.m-info, svg.m-math rect.m-info, -div.m-plot svg .m-bar.m-info { +div.m-plot svg .m-bar.m-info, +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-info svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-info svg g.m-edge text, +div.m-graph.m-info svg g.m-node.m-flat text { fill: #2e7dc5; } +div.m-graph.m-info svg g.m-edge polygon, +div.m-graph.m-info svg g.m-edge path, +div.m-graph.m-info svg g.m-node ellipse, +div.m-graph.m-info svg g.m-node polygon { + stroke: #2e7dc5; +} div.m-math.m-dim svg, svg.m-math.m-dim, div.m-math svg g.m-dim, svg.m-math g.m-dim, div.m-math svg rect.m-dim, svg.m-math rect.m-dim, -div.m-plot svg .m-bar.m-dim { +div.m-plot svg .m-bar.m-dim, +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-node:not(.m-flat) ellipse, +div.m-graph.m-dim svg g.m-node:not(.m-flat) polygon, +div.m-graph.m-dim svg g.m-edge text, +div.m-graph.m-dim svg g.m-node.m-flat text { fill: #bdbdbd; } +div.m-graph.m-dim svg g.m-edge polygon, +div.m-graph.m-dim svg g.m-edge path, +div.m-graph.m-dim svg g.m-node ellipse, +div.m-graph.m-dim svg g.m-node polygon { + stroke: #bdbdbd; +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-node.m-default:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-default:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-default text, +div.m-graph svg g.m-node.m-default.m-flat text { + fill: #000000; +} +div.m-graph svg g.m-edge.m-default polygon, +div.m-graph svg g.m-edge.m-default path, +div.m-graph svg g.m-node.m-default ellipse, +div.m-graph svg g.m-node.m-default polygon { + stroke: #000000; +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-node.m-primary:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-primary:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-primary text, +div.m-graph svg g.m-node.m-primary.m-flat text { + fill: #cb4b16; +} +div.m-graph svg g.m-edge.m-primary polygon, +div.m-graph svg g.m-edge.m-primary path, +div.m-graph svg g.m-node.m-primary ellipse, +div.m-graph svg g.m-node.m-primary polygon { + stroke: #cb4b16; +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-node.m-success:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-success:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-success text, +div.m-graph svg g.m-node.m-success.m-flat text { + fill: #31c25d; +} +div.m-graph svg g.m-edge.m-success polygon, +div.m-graph svg g.m-edge.m-success path, +div.m-graph svg g.m-node.m-success ellipse, +div.m-graph svg g.m-node.m-success polygon { + stroke: #31c25d; +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-node.m-warning:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-warning:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-warning text, +div.m-graph svg g.m-node.m-warning.m-flat text { + fill: #c7cf2f; +} +div.m-graph svg g.m-edge.m-warning polygon, +div.m-graph svg g.m-edge.m-warning path, +div.m-graph svg g.m-node.m-warning ellipse, +div.m-graph svg g.m-node.m-warning polygon { + stroke: #c7cf2f; +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-node.m-danger:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-danger:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-danger text, +div.m-graph svg g.m-node.m-danger.m-flat text { + fill: #f60000; +} +div.m-graph svg g.m-edge.m-danger polygon, +div.m-graph svg g.m-edge.m-danger path, +div.m-graph svg g.m-node.m-danger ellipse, +div.m-graph svg g.m-node.m-danger polygon { + stroke: #f60000; +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-node.m-info:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-info:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-info text, +div.m-graph svg g.m-node.m-info.m-flat text { + fill: #2e7dc5; +} +div.m-graph svg g.m-edge.m-info polygon, +div.m-graph svg g.m-edge.m-info path, +div.m-graph svg g.m-node.m-info ellipse, +div.m-graph svg g.m-node.m-info polygon { + stroke: #2e7dc5; +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-node.m-dim:not(.m-flat) ellipse, +div.m-graph svg g.m-node.m-dim:not(.m-flat) polygon, +div.m-graph svg g.m-edge.m-dim text, +div.m-graph svg g.m-node.m-dim.m-flat text { + fill: #bdbdbd; +} +div.m-graph svg g.m-edge.m-dim polygon, +div.m-graph svg g.m-edge.m-dim path, +div.m-graph svg g.m-node.m-dim ellipse, +div.m-graph svg g.m-node.m-dim polygon { + stroke: #bdbdbd; +} p, ul, ol, dl, blockquote, pre, figure.m-code-figure, figure.m-console-figure, hr, .m-note, .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image, img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math { diff --git a/doc/css/components.rst b/doc/css/components.rst index 8980414d..cd8d1e0b 100644 --- a/doc/css/components.rst +++ b/doc/css/components.rst @@ -1102,12 +1102,90 @@ with :css:`.m-line`, error bars with :css:`.m-error`. Use .. raw:: html :file: components-plot.svg -.. note-success:: +.. note-info:: Plot styling is designed to be used with extenal tools, for example Python - Matplotlib. If you use Pelican, m.css has a `Plots <{filename}/plugins/plots.rst>`__ - plugin that allows you to produce plots using :rst:`.. plot::` directives - directly in your :abbr:`reST ` markup. + Matplotlib. If you use Pelican, m.css has a + `m.plots <{filename}/plugins/plots-and-graphs.rst#plots>`__ plugin that + allows you to produce plots using :rst:`.. plot::` directives directly in + your :abbr:`reST ` markup. + +`Graphs`_ +========= + +Wrap a :html:`` element in a :html:`
` to make it +centered and occupying full width at most. Wrap edge :html:``, +:html:`` and :html:`` elements in :html:`` to +style them as edges, wrap node :html:``, :html:`` and +:html:`` elements in :html:`` to style them as nodes. +You can use `CSS color classes <#colors>`_ on either the wrapper :html:`
` +or on the :html:`` to color the whole graph or its parts. Use :css:`.m-flat` +on a :css:`.m-node` to make it just an outline instead of filled. + +.. code-figure:: + + .. code:: html + +
+ + + yes + + + + no + + + + + no + + + + + no + +
+ + .. raw:: html + +
+ + + FSM + + yes + + yes + + + no + + no + + + yes->no + + + no + + + no->no + + + no + + + +
+ +.. note-primary:: + + Similarly to plot styling, graph styling is designed to be used with + external tools, for example Graphviz. If you use Pelican, m.css has a + `m.dot <{filename}/plugins/plots-and-graphs.rst#graphs>`__ plugin that + allows you to produce plots using :rst:`.. graph::` directives directly in + your :abbr:`reST ` markup. `Padding`_ ========== diff --git a/doc/plugins.rst b/doc/plugins.rst index 9a4de1ef..1ab7289f 100644 --- a/doc/plugins.rst +++ b/doc/plugins.rst @@ -45,7 +45,8 @@ and restart Pelican. Download the plugins below or - :gh:`m.images ` - :gh:`m.math ` (needs also :gh:`latex2svg `), :gh:`m.code ` (needs also :gh:`ansilexer `) -- :gh:`m.plots ` +- :gh:`m.plots `, + :gh:`m.dot ` - :gh:`m.gh `, :gh:`m.dox `, :gh:`m.gl `, @@ -88,12 +89,13 @@ rendering and syntax highlighting, so they are provided as separate packages that you can but don't have to use. With these, math and code snippets can be entered directly in your :abbr:`reST ` sources. -`Plots » <{filename}/plugins/plots.rst>`_ -=================================================== +`Plots and graphs » <{filename}/plugins/plots-and-graphs.rst>`_ +=============================================================== -With :py:`m.plots` you can render various graphs and charts directly from -values in your :abbr:`reST ` sources. The result is embedded -as an inline SVG and can be styled using CSS like everything else. +With :py:`m.plots` and :py:`m.dot` you can render various graphs and charts +directly from values in your :abbr:`reST ` sources. The +result is embedded as an inline SVG and can be styled using CSS like everything +else. `Links and other » <{filename}/plugins/links.rst>`_ =================================================== diff --git a/doc/plugins/links.rst b/doc/plugins/links.rst index 6ee44000..bd355ac3 100644 --- a/doc/plugins/links.rst +++ b/doc/plugins/links.rst @@ -30,7 +30,7 @@ Links and other .. note-dim:: :class: m-text-center - `« Plots <{filename}/plugins/plots.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Metadata » <{filename}/plugins/metadata.rst>`_ + `« Plots and graphs <{filename}/plugins/plots-and-graphs.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Metadata » <{filename}/plugins/metadata.rst>`_ .. role:: py(code) :language: py diff --git a/doc/plugins/math-and-code.rst b/doc/plugins/math-and-code.rst index 71178442..69014ab5 100644 --- a/doc/plugins/math-and-code.rst +++ b/doc/plugins/math-and-code.rst @@ -30,7 +30,7 @@ Math and code .. note-dim:: :class: m-text-center - `« Images <{filename}/plugins/images.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Plots » <{filename}/plugins/plots.rst>`_ + `« Images <{filename}/plugins/images.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Plots and graphs » <{filename}/plugins/plots-and-graphs.rst>`_ .. role:: css(code) :language: css diff --git a/doc/plugins/plots-and-graphs-test.rst b/doc/plugins/plots-and-graphs-test.rst new file mode 100644 index 00000000..cc2f4488 --- /dev/null +++ b/doc/plugins/plots-and-graphs-test.rst @@ -0,0 +1,292 @@ +.. + This file is part of m.css. + + Copyright © 2017, 2018 Vladimír Vondruš + + Permission is hereby granted, free of charge, to any person obtaining a + copy of this software and associated documentation files (the "Software"), + to deal in the Software without restriction, including without limitation + the rights to use, copy, modify, merge, publish, distribute, sublicense, + and/or sell copies of the Software, and to permit persons to whom the + Software is furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included + in all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL + THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + DEALINGS IN THE SOFTWARE. +.. + +Test +#### + +:save_as: plugins/plots-and-graphs/test/index.html +:breadcrumb: {filename}/plugins.rst Pelican plugins + {filename}/plugins/plots-and-graphs.rst Plots and graphs + +Plots +===== + +.. container:: m-row + + .. container:: m-col-m-6 + + .. plot:: Fastest animals + :type: barh + :labels: + Cheetah + Pronghorn + :units: km/h + :values: 109.4 88.5 + :colors: warning primary + :errors: 14.32 5.5 + + .. container:: m-col-m-6 + + .. plot:: Fastest animals + :type: barh + :labels: + Cheetah + Pronghorn + Springbok + Wildebeest + :units: km/h + :values: 109.4 88.5 88 80.5 + :colors: warning primary danger info + +Graphs +====== + +First is colored except the self-pointing "no", second is colored globally, +third is colored globally with overrides except for for the self-pointing "no". + +.. container:: m-row + + .. container:: m-col-m-4 + + .. digraph:: FSM + + rankdir=LR + yes [shape=circle, class="m-default", style=filled] + no [shape=circle, class="m-default"] + yes -> no [label="no", class="m-default"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-default + + rankdir=LR + yes [shape=circle, style=filled] + no [shape=circle] + yes -> no [label="no"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-danger + + rankdir=LR + yes [shape=circle, class="m-default", style=filled] + no [shape=circle, class="m-default"] + yes -> no [label="no", class="m-default"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + + rankdir=LR + yes [shape=circle, class="m-primary", style=filled] + no [shape=circle, class="m-primary"] + yes -> no [label="no", class="m-primary"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-primary + + rankdir=LR + yes [shape=circle, style=filled] + no [shape=circle] + yes -> no [label="no"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-danger + + rankdir=LR + yes [shape=circle, class="m-primary", style=filled] + no [shape=circle, class="m-primary"] + yes -> no [label="no", class="m-primary"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + + rankdir=LR + yes [shape=circle, class="m-success", style=filled] + no [shape=circle, class="m-success"] + yes -> no [label="no", class="m-success"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-success + + rankdir=LR + yes [shape=circle, style=filled] + no [shape=circle] + yes -> no [label="no"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-danger + + rankdir=LR + yes [shape=circle, class="m-success", style=filled] + no [shape=circle, class="m-success"] + yes -> no [label="no", class="m-success"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + + rankdir=LR + yes [shape=circle, class="m-warning", style=filled] + no [shape=circle, class="m-warning"] + yes -> no [label="no", class="m-warning"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-warning + + rankdir=LR + yes [shape=circle, style=filled] + no [shape=circle] + yes -> no [label="no"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-danger + + rankdir=LR + yes [shape=circle, class="m-warning", style=filled] + no [shape=circle, class="m-warning"] + yes -> no [label="no", class="m-warning"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + + rankdir=LR + yes [shape=circle, class="m-danger", style=filled] + no [shape=circle, class="m-danger"] + yes -> no [label="no", class="m-danger"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-danger + + rankdir=LR + yes [shape=circle, style=filled] + no [shape=circle] + yes -> no [label="no"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-success + + rankdir=LR + yes [shape=circle, class="m-danger", style=filled] + no [shape=circle, class="m-danger"] + yes -> no [label="no", class="m-danger"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + + rankdir=LR + yes [shape=circle, class="m-info", style=filled] + no [shape=circle, class="m-info"] + yes -> no [label="no", class="m-info"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-info + + rankdir=LR + yes [shape=circle, style=filled] + no [shape=circle] + yes -> no [label="no"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-danger + + rankdir=LR + yes [shape=circle, class="m-info", style=filled] + no [shape=circle, class="m-info"] + yes -> no [label="no", class="m-info"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + + rankdir=LR + yes [shape=circle, class="m-dim", style=filled] + no [shape=circle, class="m-dim"] + yes -> no [label="no", class="m-dim"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-dim + + rankdir=LR + yes [shape=circle, style=filled] + no [shape=circle] + yes -> no [label="no"] + no -> no [label="no"] + + .. container:: m-col-m-4 + + .. digraph:: FSM + :class: m-danger + + rankdir=LR + yes [shape=circle, class="m-dim", style=filled] + no [shape=circle, class="m-dim"] + yes -> no [label="no", class="m-dim"] + no -> no [label="no"] diff --git a/doc/plugins/plots.rst b/doc/plugins/plots-and-graphs.rst similarity index 53% rename from doc/plugins/plots.rst rename to doc/plugins/plots-and-graphs.rst index 8733ea65..a05aec77 100644 --- a/doc/plugins/plots.rst +++ b/doc/plugins/plots-and-graphs.rst @@ -22,8 +22,8 @@ DEALINGS IN THE SOFTWARE. .. -Plots -##### +Plots and graphs +################ :breadcrumb: {filename}/plugins.rst Pelican plugins :footer: @@ -32,15 +32,24 @@ Plots `« Math and code <{filename}/plugins/math-and-code.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Links and other » <{filename}/plugins/math-and-code.rst>`_ -Allows you to render plots directly from data specified inline in the page -source. Similarly to `math rendering <{filename}/admire/math.rst>`_, the plots -are rendered to a SVG that's embedded directly in the HTML markup. +.. role:: dot(code) + :language: dot + +These plugin allow you to render plots and graphs directly from data specified +inline in the page source. Similarly to `math rendering <{filename}/admire/math.rst>`_, +the graphics is rendered to a SVG that's embedded directly in the HTML markup. + +.. note-danger:: Experimental features + + Please note that these plugins are highly experimental and at the moment + created to fulfill a particular immediate need of the author. They might + not work reliably on general input. .. contents:: :class: m-block m-default -`How to use`_ -============= +`Plots`_ +======== Download the `m/plots.py <{filename}/plugins.rst>`_ file, put it including the ``m/`` directory into one of your :py:`PLUGIN_PATHS` and add ``m.plots`` @@ -66,11 +75,11 @@ or your distribution package manager: The plugin produces SVG plots that make use of the `CSS plot styling <{filename}/css/components.rst#plots>`_. -`Bar graphs`_ -============= +`Bar charts`_ +------------- -Currently the only supported plot type is a horizontal bar graph, denoted by -:rst:`:type: hbar`: +Currently the only supported plot type is a horizontal bar chart, denoted by +:rst:`.. plot::` directive with :rst:`:type: hbar`: .. code-figure:: @@ -105,7 +114,7 @@ It's also optionally possible to add error bars using :rst:`:error:` and configure bar colors using :rst:`:colors:`. The colors correspond to m.css `color classes <{filename}/css/components.rst#colors>`_ and you can either use one color for all or one for each value, separated by whitespace. It's -possible to add an extra line of labels using :rst:`:labels_extra:`. Bar graph +possible to add an extra line of labels using :rst:`:labels_extra:`. Bar chart height is calculated automatically based on amount of values, you can adjust the bar height using :rst:`:bar_height:`. Default value is :py:`0.4`. @@ -148,3 +157,119 @@ the bar height using :rst:`:bar_height:`. Default value is :py:`0.4`. :errors: 0.74 3.65 9.45 25.66 :colors: success info danger dim :bar_height: 0.6 + +`Graphs`_ +========= + +Download the `m/dot.py <{filename}/plugins.rst>`_ file, put it including the +``m/`` directory into one of your :py:`PLUGIN_PATHS` and add ``m.dot`` +package to your :py:`PLUGINS` in ``pelicanconf.py``. + +.. note-danger:: + + Note that this plugin, unlike most of the others, requires at least Python + 3.5 to run properly. + +.. code:: python + + PLUGINS += ['m.dot'] + M_DOT_FONT = 'Source Sans Pro' + +Set :py:`M_DOT_FONT` to a font that matches your CSS theme (it's Source Sans +Pro for `builtin m.css themes <{filename}/css/themes.rst>`_), note that you +*need to have the font installed* on your system, otherwise it will fall back +to whatever system font it finds instead (for example DejaVu Sans) and the +output won't look as expected. In addition you need the +`Graphviz `_ library installed. Get it via your +distribution package manager, for example on Ubuntu: + +.. code:: sh + + sudo apt install graphviz + +The plugin produces SVG graphcs that make use of the +`CSS graph styling <{filename}/css/components.rst#graphs>`_. + +`Directed graphs`_ +-------------------- + +The :rst:`.. digraph::` directive uses the ``dot`` tool to produce directed +graphs. The required directive argument is graph title, contents is whatever +you would put inside the :dot:`digraph` block. Use the :rst:`:class:` to +specify a `CSS color class <{filename}/css/components.rst#colors>`_ for the +whole graph, it's also possible to color particular nodes and edges using the +(currently undocumented) ``class`` attribute. + +.. code-figure:: + + .. code:: rst + + .. digraph:: Finite state machine + + rankdir=LR + + S₁ [shape=circle, class="m-primary", peripheries=2] + S₂ [shape=circle] + _ [style=invis] + + _ -> S₁ [class="m-warning"] + S₁ -> S₂ [label="0"] + S₂ -> S₁ [label="0"] + S₁ -> S₁ [label="1"] + S₂ -> S₂ [label="1"] + + .. digraph:: Finite state machine + + rankdir=LR + + S₁ [shape=circle, class="m-primary", peripheries=2] + S₂ [shape=circle] + _ [style=invis] + b [style=invis] + + _ -> S₁ [class="m-warning"] + S₂ -> b [style=invis] + S₁ -> S₂ [label="0"] + S₂ -> S₁ [label="0"] + S₁ -> S₁ [label="1"] + S₂ -> S₂ [label="1"] + +For more information check the official +`GraphViz Reference `_, in particular the +extensive `attribute documentation `_. + +.. note-warning:: + + Note that currently all styling is discarded and only the + ``class`` and ``fontsize`` attributes are taken into account. + +`Undirected graphs`_ +-------------------- + +The :rst:`.. graph::` and :rst:`.. strict-graph::` directives are similar to +:rst:`.. digraph::`, but allow undirected graphs only. Again these are +equivalent to :dot:`graph` and :dot:`strict graph` in the DOT language: + +.. code-figure:: + + .. code:: rst + + .. graph:: A house + :class: m-success + + { rank=same 0 1 } + { rank=same 2 4 } + + 0 -- 1 -- 2 -- 3 -- 4 -- 0 -- 2 -- 4 --1 + 3 [style=solid] + + .. graph:: A house + :class: m-success + + rankdir=BT + + { rank=same 0 1 } + { rank=same 2 4 } + + 0 -- 1 -- 2 -- 3 -- 4 -- 0 -- 2 -- 4 --1 + 3 [style=filled] diff --git a/doc/plugins/plots-test.rst b/doc/plugins/plots-test.rst deleted file mode 100644 index a99935e1..00000000 --- a/doc/plugins/plots-test.rst +++ /dev/null @@ -1,57 +0,0 @@ -.. - This file is part of m.css. - - Copyright © 2017, 2018 Vladimír Vondruš - - Permission is hereby granted, free of charge, to any person obtaining a - copy of this software and associated documentation files (the "Software"), - to deal in the Software without restriction, including without limitation - the rights to use, copy, modify, merge, publish, distribute, sublicense, - and/or sell copies of the Software, and to permit persons to whom the - Software is furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included - in all copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL - THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER - DEALINGS IN THE SOFTWARE. -.. - -Test -#### - -:save_as: plugins/plots/test/index.html -:breadcrumb: {filename}/plugins.rst Pelican plugins - {filename}/plugins/plots.rst Plots - -.. container:: m-row - - .. container:: m-col-m-6 - - .. plot:: Fastest animals - :type: barh - :labels: - Cheetah - Pronghorn - :units: km/h - :values: 109.4 88.5 - :colors: warning primary - :errors: 14.32 5.5 - - .. container:: m-col-m-6 - - .. plot:: Fastest animals - :type: barh - :labels: - Cheetah - Pronghorn - Springbok - Wildebeest - :units: km/h - :values: 109.4 88.5 88 80.5 - :colors: warning primary danger info diff --git a/package/ci/travis.yml b/package/ci/travis.yml index 7a73243c..9ae50ced 100644 --- a/package/ci/travis.yml +++ b/package/ci/travis.yml @@ -12,6 +12,10 @@ matrix: - JOBID=py34 - language: python python: 3.5 + addons: + apt: + packages: + - graphviz env: - WITH_THEME=ON - WITH_DOXYGEN=OFF @@ -19,6 +23,10 @@ matrix: - JOBID=py35 - language: python python: 3.6 + addons: + apt: + packages: + - graphviz env: - WITH_THEME=ON - WITH_DOXYGEN=ON diff --git a/pelican-plugins/m/dot.py b/pelican-plugins/m/dot.py new file mode 100644 index 00000000..62dff88c --- /dev/null +++ b/pelican-plugins/m/dot.py @@ -0,0 +1,162 @@ +# +# This file is part of m.css. +# +# Copyright © 2017, 2018 Vladimír Vondruš +# +# Permission is hereby granted, free of charge, to any person obtaining a +# copy of this software and associated documentation files (the "Software"), +# to deal in the Software without restriction, including without limitation +# the rights to use, copy, modify, merge, publish, distribute, sublicense, +# and/or sell copies of the Software, and to permit persons to whom the +# Software is furnished to do so, subject to the following conditions: +# +# The above copyright notice and this permission notice shall be included +# in all copies or substantial portions of the Software. +# +# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL +# THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER +# DEALINGS IN THE SOFTWARE. +# + +import pelican +import re +import subprocess + +from docutils import nodes +from docutils.parsers import rst +from docutils.parsers.rst import directives +from docutils.parsers.rst.roles import set_classes + +_patch_src = re.compile(r"""<\?xml version="1\.0" encoding="UTF-8" standalone="no"\?> + + + +\n""") + +_class_src = re.compile(r""" +(?P[^<]*) +<(?Pellipse|polygon|path) fill="(?P[^"]+)" stroke="[^"]+" """) + +_class_dst = r""" +{title} +<{element} """ + +_attributes_src = re.compile(r"""<(?Pellipse|polygon) fill="[^"]+" stroke="[^"]+" """) + +_attributes_dst = r"""<\g """ + +# re.compile() is called after replacing {font} in configure() +_text_src_src = ' font-family="{font}" font-size="(?P[^"]+)" fill="[^"]+"' + +_text_dst = ' style="font-size: {size}px;"' + +_font = '' +_font_size = 16.0 # TODO: avoid hardcoding this + +# The pt are actually px (16pt font is the same size as 16px), so just +# converting to rem here +_pt2em = 1.0/_font_size + +class Dot(rst.Directive): + has_content = True + required_arguments = 1 + final_argument_whitespace = True + option_spec = {'class': directives.class_option, + 'name': directives.unchanged} + + def run(self, source): + set_classes(self.options) + + title_text = self.arguments[0] + + try: + ret = subprocess.run(['dot', '-Tsvg', + '-Gfontname={}'.format(_font), + '-Nfontname={}'.format(_font), + '-Efontname={}'.format(_font), + '-Gfontsize={}'.format(_font_size), + '-Nfontsize={}'.format(_font_size), + '-Efontsize={}'.format(_font_size), + '-Gbgcolor=transparent', + ], input=source.encode('utf-8'), stdout=subprocess.PIPE, stderr=subprocess.PIPE) + if ret.returncode: print(ret.stderr.decode('utf-8')) + ret.check_returncode() + except FileNotFoundError: # pragma: no cover + raise RuntimeError("dot not found") + + # First Remove comments + svg = _comment_src.sub('', ret.stdout.decode('utf-8')) + + # Remove preamble and fixed size + def patch_repl(match): return _patch_dst.format( + width=_pt2em*float(match.group('width')), + height=_pt2em*float(match.group('height')), + viewBox=match.group('viewBox')) + svg = _patch_src.sub(patch_repl, svg) + + # Remove unnecessary IDs and attributes, replace classes for elements + def element_repl(match): + classes = ['m-' + match.group('type')] + match.group('classes').replace('-', '-').split() + # distinguish between solid and filled nodes + if match.group('type') == 'node' and match.group('fill') == 'none': + classes += ['m-flat'] + + return _class_dst.format( + classes=' '.join(classes), + title=match.group('title'), + element=match.group('element')) + svg = _class_src.sub(element_repl, svg) + + # Remove unnecessary fill and stroke attributes + svg = _attributes_src.sub(_attributes_dst, svg) + + # Remove unnecessary text attributes. Keep font size only if nondefault + def text_repl(match): + if float(match.group('size')) != _font_size: + return _text_dst.format(size=float(match.group('size'))) + return '' + svg = _text_src.sub(text_repl, svg) + + container = nodes.container(**self.options) + container['classes'] = ['m-graph'] + container['classes'] + node = nodes.raw('', svg, format='html') + container.append(node) + return [container] + +class Digraph(Dot): + def run(self): + return Dot.run(self, 'digraph "{}" {{\n{}}}'.format(self.arguments[0], '\n'.join(self.content))) + +class StrictDigraph(Dot): + def run(self): + return Dot.run(self, 'strict digraph "{}" {{\n{}}}'.format(self.arguments[0], '\n'.join(self.content))) + +class Graph(Dot): + def run(self): + return Dot.run(self, 'graph "{}" {{\n{}}}'.format(self.arguments[0], '\n'.join(self.content))) + +class StrictGraph(Dot): + def run(self): + return Dot.run(self, 'strict graph "{}" {{\n{}}}'.format(self.arguments[0], '\n'.join(self.content))) + +def configure(pelicanobj): + global _font, _text_src + _font = pelicanobj.settings.get('M_DOT_FONT', 'Source Sans Pro') + _text_src = re.compile(_text_src_src.format(font=_font)) + +def register(): + pelican.signals.initialized.connect(configure) + rst.directives.register_directive('digraph', Digraph) + rst.directives.register_directive('strict-digraph', StrictDigraph) + rst.directives.register_directive('graph', Graph) + rst.directives.register_directive('strict-graph', StrictGraph) diff --git a/pelican-plugins/m/test/dot/page.html b/pelican-plugins/m/test/dot/page.html new file mode 100644 index 00000000..41b0f52b --- /dev/null +++ b/pelican-plugins/m/test/dot/page.html @@ -0,0 +1,177 @@ + + + + + m.dot | A Pelican Blog + + + + + + +
+
+
+
+
+
+

m.dot

+ +

Note: the test uses DejaVu Sans instead of Source Sans Pro in order to have +predictable rendering on the CIs.

+

Different shapes, fills etc. All default colors, filled only the first node +and the arrowheads, nothing else. Non-default font size should be preserved.

+
+ + +Basics + +a + +a + + +b + + +b + + +a->b + + + + +c + +c + + +b->c + + +0 + + +c->c + + +1 + + + +
+

Colors:

+
+ + +Colors + +a + +a + + +b + +b + + +a->b + + +yes + + +b->b + + +no + + + +
+

Unoriented graph:

+
+ + +A to B + +a + +a + + +b + +b + + +a--b + + + +a--b + + + + +
+

Strict graphs:

+
+ + +A to B + +a + +a + + +b + +b + + +a->b + + + + + +
+
+ + +A to B + +a + +a + + +b + +b + + +a--b + + + + +
+ +
+
+
+
+
+ + diff --git a/pelican-plugins/m/test/dot/page.rst b/pelican-plugins/m/test/dot/page.rst new file mode 100644 index 00000000..2961be1e --- /dev/null +++ b/pelican-plugins/m/test/dot/page.rst @@ -0,0 +1,48 @@ +m.dot +##### + +Note: the test uses DejaVu Sans instead of Source Sans Pro in order to have +predictable rendering on the CIs. + +Different shapes, fills etc. All default colors, filled only the first node +and the arrowheads, nothing else. Non-default font size should be preserved. + +.. digraph:: Basics + + rankdir=LR + + a [style=filled shape=rect] + b [peripheries=2 shape=circle] + c [shape=ellipse] + a -> b + b -> c [label="0" fontsize=40] + c -> c [label="1"] + +Colors: + +.. digraph:: Colors + + a [class="m-success"] + b [style=filled shape=circle class="m-dim"] + a -> b [class="m-warning" label="yes"] + b -> b [class="m-primary" label="no"] + +Unoriented graph: + +.. graph:: A to B + :class: m-success + + a -- b + a -- b + +Strict graphs: + +.. strict-digraph:: A to B + + a -> b + a -> b + +.. strict-graph:: A to B + + a -- b + a -- b diff --git a/pelican-plugins/m/test/test_dot.py b/pelican-plugins/m/test/test_dot.py new file mode 100644 index 00000000..5938a1af --- /dev/null +++ b/pelican-plugins/m/test/test_dot.py @@ -0,0 +1,44 @@ +# +# This file is part of m.css. +# +# Copyright © 2017, 2018 Vladimír Vondruš +# +# Permission is hereby granted, free of charge, to any person obtaining a +# copy of this software and associated documentation files (the "Software"), +# to deal in the Software without restriction, including without limitation +# the rights to use, copy, modify, merge, publish, distribute, sublicense, +# and/or sell copies of the Software, and to permit persons to whom the +# Software is furnished to do so, subject to the following conditions: +# +# The above copyright notice and this permission notice shall be included +# in all copies or substantial portions of the Software. +# +# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL +# THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER +# DEALINGS IN THE SOFTWARE. +# + +import sys +import unittest + +from distutils.version import LooseVersion + +from m.test import PluginTestCase + +class Dot(PluginTestCase): + def __init__(self, *args, **kwargs): + super().__init__(__file__, '', *args, **kwargs) + + @unittest.skipUnless(LooseVersion(sys.version) >= LooseVersion("3.5"), + "The math plugin requires at least Python 3.5 installed") + def test(self): + self.run_pelican({ + 'PLUGINS': ['m.htmlsanity', 'm.dot'], + 'M_DOT_FONT': 'DejaVu Sans' + }) + + self.assertEqual(*self.actual_expected_contents('page.html')) diff --git a/site/pelicanconf.py b/site/pelicanconf.py index 5493bdc7..de0ebdbc 100644 --- a/site/pelicanconf.py +++ b/site/pelicanconf.py @@ -88,7 +88,7 @@ M_LINKS_NAVBAR2 = [('Pelican plugins', 'plugins/', 'plugins', [ ('Images', 'plugins/images/', 'plugins/images'), ('Math and code', 'plugins/math-and-code/', 'plugins/math-and-code'), ('Links and other', 'plugins/links/', 'plugins/links'), - ('Plots', 'plugins/plots/', 'plugins/plots'), + ('Plots and graphs', 'plugins/plots-and-graphs/', 'plugins/plots-and-graphs'), ('Metadata', 'plugins/metadata/', 'plugins/metadata')]), ('Doxygen theme', 'doxygen/', 'doxygen', []), ('GitHub', 'https://github.com/mosra/m.css', '', [])] @@ -119,7 +119,7 @@ M_LINKS_FOOTER4 = [('Pelican plugins', 'plugins/'), ('Components', 'plugins/components/'), ('Images', 'plugins/images/'), ('Math and code', 'plugins/math-and-code/'), - ('Plots', 'plugins/plots/'), + ('Plots and graphs', 'plugins/plots-and-graphs/'), ('Links and other', 'plugins/links/'), ('Metadata', 'plugins/metadata/')] @@ -141,6 +141,7 @@ PLUGINS = ['m.abbr', 'm.code', 'm.components', 'm.dox', + 'm.dot', 'm.filesize', 'm.gl', 'm.gh',