mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-01-23 23:15:46 -06:00
791 lines
30 KiB
HTML
791 lines
30 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<html
|
|
lang="en"
|
|
dir="ltr"
|
|
class="scroll-smooth"
|
|
data-default-appearance="dark"
|
|
data-auto-appearance="false"
|
|
><head>
|
|
<meta charset="utf-8" />
|
|
|
|
<meta http-equiv="content-language" content="en" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
|
<title>Charts · Blowfish</title>
|
|
<meta name="title" content="Charts · Blowfish" />
|
|
|
|
<meta name="description" content="Product | Nuno Coração" />
|
|
|
|
|
|
|
|
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/charts/" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link
|
|
type="text/css"
|
|
rel="stylesheet"
|
|
href="/blowfish/css/main.bundle.min.3f7a3d89b943c3dacb033ff4448c83a5b58692eb75f99e903ee759443c690298da06dc2cc7adc967ae51bb50103acfa1b65f99a428ef2ff09176f2519b277273.css"
|
|
integrity="sha512-P3o9iblDw9rLAz/0RIyDpbWGkut1+Z6QPudZRDxpApjaBtwsx63JZ65Ru1AQOs+htl+ZpCjvL/CRdvJRmydycw=="
|
|
/>
|
|
|
|
|
|
<script type="text/javascript" src="/blowfish/js/main.min.cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e.js" integrity="sha512-z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg=="></script>
|
|
|
|
|
|
<script type="text/javascript" src="/blowfish/js/appearance.min.4a00b8b8a9118d31826a03a2a9cca83390fcd3eddd9e03868fffcf4dc1e2dc15649e9266091f1225a24e1bcf6558ff4807f77663bcfaaa8f3050d73c1bd5bf0b.js" integrity="sha512-SgC4uKkRjTGCagOiqcyoM5D80+3dngOGj//PTcHi3BVknpJmCR8SJaJOG89lWP9IB/d2Y7z6qo8wUNc8G9W/Cw=="></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script defer type="text/javascript" id="script-bundle" src="/blowfish/js/main.bundle.min.9ae0a991bb442898e9bc60cf318b4de3ff878325ff3821625a5564b32b2f66aec0e7f7d0e00ca3ac7df59d9f01c18c88b6bdd213184f86ac9ce06d7bdffbadf8.js" integrity="sha512-muCpkbtEKJjpvGDPMYtN4/+HgyX/OCFiWlVksysvZq7A5/fQ4AyjrH31nZ8BwYyItr3SExhPhqyc4G173/ut+A==" data-copy="Copy" data-copied="Copied"></script>
|
|
|
|
<script src="/js/zoom.min.js"></script>
|
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/blowfish/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/blowfish/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/blowfish/favicon-16x16.png" />
|
|
<link rel="manifest" href="/blowfish/site.webmanifest" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta property="og:title" content="Charts" />
|
|
<meta property="og:description" content="Guide to Chart.js usage in Congo" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://nunocoracao.github.io/blowfish/samples/charts/" /><meta property="article:section" content="samples" />
|
|
<meta property="article:published_time" content="2019-03-06T00:00:00+00:00" />
|
|
<meta property="article:modified_time" content="2019-03-06T00:00:00+00:00" /><meta property="og:site_name" content="Blowfish" />
|
|
|
|
|
|
<meta name="twitter:card" content="summary"/>
|
|
<meta name="twitter:title" content="Charts"/>
|
|
<meta name="twitter:description" content="Guide to Chart.js usage in Congo"/>
|
|
|
|
|
|
<script type="application/ld+json">
|
|
[{
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
"articleSection": "Content Samples",
|
|
"name": "Charts",
|
|
"headline": "Charts",
|
|
"description": "Guide to Chart.js usage in Congo",
|
|
"abstract": "Congo includes Chart.js for powerful charts and data visualisations.",
|
|
"inLanguage": "en",
|
|
"url" : "https:\/\/nunocoracao.github.io\/blowfish\/samples\/charts\/",
|
|
"author" : {
|
|
"@type": "Person",
|
|
"name": "Blowfish"
|
|
},
|
|
"copyrightYear": "2019",
|
|
"dateCreated": "2019-03-06T00:00:00\u002b00:00",
|
|
"datePublished": "2019-03-06T00:00:00\u002b00:00",
|
|
|
|
"dateModified": "2019-03-06T00:00:00\u002b00:00",
|
|
|
|
"keywords": ["chart","sample","graph","shortcodes"],
|
|
|
|
"mainEntityOfPage": "true",
|
|
"wordCount": "81"
|
|
}]
|
|
</script>
|
|
|
|
|
|
|
|
<meta name="author" content="Blowfish" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script defer type="text/javascript" src="/blowfish/js/chart.bundle.7bb7442fd631bca73babc31b569fe1d964f0e9d02a52e7ca4f8d2b425f7aa4977bc8b0fde1bf5afecc963031e5c78e6caa3a4520ea9f4aa467d99065a5d60af0.js" integrity="sha512-e7dEL9YxvKc7q8MbVp/h2WTw6dAqUufKT40rQl96pJd7yLD94b9a/syWMDHlx45sqjpFIOqfSqRn2ZBlpdYK8A=="></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
|
|
<script>
|
|
var doNotTrack = false;
|
|
if (!doNotTrack) {
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-XXXXXX', { 'anonymize_ip': false });
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
|
</head>
|
|
<body
|
|
class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"
|
|
>
|
|
<div id="the-top" class="absolute flex self-center">
|
|
<a
|
|
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
|
|
href="#main-content"
|
|
><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400"
|
|
>↓</span
|
|
>Skip to main content</a
|
|
>
|
|
</div>
|
|
|
|
|
|
<div style="padding-left:0;padding-right:0"
|
|
class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
|
|
|
|
|
|
<div>
|
|
<a href="/blowfish/" class="flex">
|
|
<span class="sr-only">Blowfish</span>
|
|
|
|
<img src="/blowfish/img/blowfish_logo_transparent.png" width="1000" height="1000"
|
|
class="max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="Blowfish" />
|
|
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex flex-1 items-center justify-between">
|
|
<nav class="flex space-x-3">
|
|
|
|
<a href="/" class="text-base font-medium text-gray-500 hover:text-gray-900">Blowfish</a>
|
|
|
|
</nav>
|
|
<div class="hidden md:flex items-center space-x-5 md:ml-12">
|
|
|
|
|
|
|
|
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
|
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div class="flex md:hidden items-center space-x-5 md:ml-12">
|
|
|
|
<span></span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="-my-2 -mr-2 md:hidden">
|
|
|
|
<label id="menu-button" for="menu-controller" class="block">
|
|
<input type="checkbox" id="menu-controller" class="hidden" />
|
|
<div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
|
|
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
<div id="menu-wrapper" style="padding-top:25px;"
|
|
class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
|
|
<ul
|
|
class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
|
|
<li class="mb-1">
|
|
<span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="mb-1">
|
|
<a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
|
|
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="mobile-menu"
|
|
class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
|
|
<ul
|
|
class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
|
|
<li class="mb-1">
|
|
<span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
</li>
|
|
|
|
|
|
<li class="mb-1">
|
|
<a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
|
|
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="relative flex flex-col grow">
|
|
<main id="main-content" class="grow">
|
|
|
|
<article>
|
|
<header class="max-w-prose">
|
|
|
|
<ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="inline hidden">
|
|
<a
|
|
class="hover:underline decoration-neutral-300 dark:underline-neutral-600"
|
|
href="/blowfish/"
|
|
>Blowfish</a
|
|
><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
|
|
|
|
<li class="inline ">
|
|
<a
|
|
class="hover:underline decoration-neutral-300 dark:underline-neutral-600"
|
|
href="/blowfish/samples/"
|
|
>Content Samples</a
|
|
><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
|
|
|
|
<li class="inline hidden">
|
|
<a
|
|
class="hover:underline decoration-neutral-300 dark:underline-neutral-600"
|
|
href="/blowfish/samples/charts/"
|
|
>Charts</a
|
|
><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
|
|
Charts
|
|
</h1>
|
|
<div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-row flex-wrap items-center">
|
|
|
|
|
|
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time><span class="px-2 text-primary-500">·</span><span>81 words</span><span class="px-2 text-primary-500">·</span><span title="Reading time">1 min</span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</header>
|
|
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
|
|
|
|
<div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
|
|
<div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10">
|
|
<details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5">
|
|
<summary
|
|
class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"
|
|
>
|
|
Table of Contents
|
|
</summary>
|
|
<div
|
|
class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"
|
|
>
|
|
<nav id="TableOfContents">
|
|
<ul>
|
|
<li><a href="#bar-chart">Bar chart</a></li>
|
|
<li><a href="#line-chart">Line chart</a></li>
|
|
<li><a href="#doughnut-chart">Doughnut chart</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="min-w-0 min-h-0 max-w-prose">
|
|
<p>Congo includes support for Chart.js using the <code>chart</code> shortcode. Simply wrap the chart markup within the shortcode. Congo automatically themes charts to match the configured <code>colorScheme</code> parameter, however the colours can be customised using normal Chart.js syntax.</p>
|
|
<p>Refer to the <a href="https://nunocoracao.github.io/blowfish/docs/shortcodes/#chart">chart shortcode</a> docs for more details.</p>
|
|
<p>The examples below are a small selection taken from the <a href="https://www.chartjs.org/docs/latest/samples">official Chart.js docs</a>. You can also <a href="https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts.md">view the page source</a> on GitHub to see the markup.</p>
|
|
<h2 id="bar-chart" class="relative group">Bar chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#bar-chart" aria-label="Anchor">#</a></span></h2>
|
|
<!-- prettier-ignore-start -->
|
|
<div class="chart">
|
|
|
|
<canvas id="637429851"></canvas>
|
|
<script type="text/javascript">
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
const ctx = document.getElementById("637429851");
|
|
const chart = new Chart(ctx, {
|
|
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [{
|
|
label: 'My First Dataset',
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)',
|
|
'rgba(255, 205, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(201, 203, 207, 0.2)'
|
|
],
|
|
borderColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(255, 159, 64)',
|
|
'rgb(255, 205, 86)',
|
|
'rgb(75, 192, 192)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(153, 102, 255)',
|
|
'rgb(201, 203, 207)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
}
|
|
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- prettier-ignore-end -->
|
|
<h2 id="line-chart" class="relative group">Line chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#line-chart" aria-label="Anchor">#</a></span></h2>
|
|
<!-- prettier-ignore-start -->
|
|
<div class="chart">
|
|
|
|
<canvas id="389716245"></canvas>
|
|
<script type="text/javascript">
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
const ctx = document.getElementById("389716245");
|
|
const chart = new Chart(ctx, {
|
|
|
|
type: 'line',
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [{
|
|
label: 'My First Dataset',
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
|
tension: 0.2
|
|
}]
|
|
}
|
|
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- prettier-ignore-end -->
|
|
<h2 id="doughnut-chart" class="relative group">Doughnut chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#doughnut-chart" aria-label="Anchor">#</a></span></h2>
|
|
<!-- prettier-ignore-start -->
|
|
<div class="chart">
|
|
|
|
<canvas id="372965481"></canvas>
|
|
<script type="text/javascript">
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
const ctx = document.getElementById("372965481");
|
|
const chart = new Chart(ctx, {
|
|
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Red', 'Blue', 'Yellow'],
|
|
datasets: [{
|
|
label: 'My First Dataset',
|
|
data: [300, 50, 100],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.7)',
|
|
'rgba(54, 162, 235, 0.7)',
|
|
'rgba(255, 205, 86, 0.7)'
|
|
],
|
|
borderWidth: 0,
|
|
hoverOffset: 4
|
|
}]
|
|
}
|
|
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- prettier-ignore-end -->
|
|
|
|
</div>
|
|
</section>
|
|
<footer class="pt-8 max-w-prose print:hidden">
|
|
|
|
<div class="flex">
|
|
|
|
|
|
|
|
|
|
<img
|
|
class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4"
|
|
width="96"
|
|
height="96"
|
|
alt="Blowfish"
|
|
src="/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png"
|
|
/>
|
|
|
|
|
|
<div class="place-self-center">
|
|
|
|
<div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
|
|
Author
|
|
</div>
|
|
<div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
|
|
Blowfish
|
|
</div>
|
|
|
|
|
|
<div class="text-2xl sm:text-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
|
|
|
|
|
<a
|
|
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
|
href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/samples/charts/&title=Charts"
|
|
title="Share on LinkedIn"
|
|
aria-label="Share on LinkedIn"
|
|
>
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
|
|
|
|
</span>
|
|
|
|
</a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
|
href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/samples/charts/&text=Charts"
|
|
title="Tweet on Twitter"
|
|
aria-label="Tweet on Twitter"
|
|
>
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
|
|
|
|
</span>
|
|
|
|
</a
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
<a
|
|
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
|
href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/samples/charts/&description=Charts"
|
|
title="Pin on Pinterest"
|
|
aria-label="Pin on Pinterest"
|
|
>
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
|
|
|
|
</span>
|
|
|
|
</a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
|
href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/samples/charts/&resubmit=true&title=Charts"
|
|
title="Submit to Reddit"
|
|
aria-label="Submit to Reddit"
|
|
>
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
|
|
|
</span>
|
|
|
|
</a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
|
href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/samples/charts/&quote=Charts"
|
|
title="Share on Facebook"
|
|
aria-label="Share on Facebook"
|
|
>
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
|
|
|
|
</span>
|
|
|
|
</a
|
|
>
|
|
|
|
|
|
|
|
<a
|
|
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
|
href="mailto:?body=https://nunocoracao.github.io/blowfish/samples/charts/&subject=Charts"
|
|
title="Send via email"
|
|
aria-label="Send via email"
|
|
>
|
|
|
|
<span class="relative inline-block align-text-bottom icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
|
|
|
</span>
|
|
|
|
</a
|
|
>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pt-8">
|
|
<hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
|
|
<div class="flex justify-between pt-3">
|
|
<span>
|
|
|
|
<a class="flex group" href="/blowfish/samples/diagrams-flowcharts/">
|
|
<span
|
|
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
|
>←</span
|
|
>
|
|
<span
|
|
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
|
>→</span
|
|
>
|
|
<span class="flex flex-col">
|
|
<span
|
|
class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
|
|
>Diagrams and Flowcharts</span
|
|
>
|
|
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
|
|
|
|
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time>
|
|
|
|
</span>
|
|
</span>
|
|
</a>
|
|
|
|
</span>
|
|
<span>
|
|
|
|
<a class="flex text-right group" href="/blowfish/samples/mathematical-notation/">
|
|
<span class="flex flex-col">
|
|
<span
|
|
class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
|
|
>Mathematical notation</span
|
|
>
|
|
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
|
|
|
|
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time>
|
|
|
|
</span>
|
|
</span>
|
|
<span
|
|
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
|
>→</span
|
|
>
|
|
<span
|
|
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
|
>←</span
|
|
>
|
|
</a>
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</footer>
|
|
</article>
|
|
|
|
|
|
</main><footer class="py-10 print:hidden">
|
|
|
|
|
|
<nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">
|
|
<ul class="flex flex-col list-none sm:flex-row">
|
|
|
|
<li
|
|
class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
|
|
>
|
|
<a
|
|
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
|
|
href="/blowfish/tags/"
|
|
title="Tags"
|
|
>Tags</a
|
|
>
|
|
</li>
|
|
|
|
<li
|
|
class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
|
|
>
|
|
<a
|
|
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
|
|
href="/blowfish/categories/"
|
|
title="Categories"
|
|
>Categories</a
|
|
>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
|
|
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
|
©
|
|
2022
|
|
Blowfish
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p class="text-xs text-neutral-500 dark:text-neutral-400">
|
|
|
|
|
|
Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
|
|
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://github.com/nunocoracao/blowfish" target="_blank" rel="noopener noreferrer">Blowfish</a>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
<script>
|
|
mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
|
|
margin: 24,
|
|
background: 'rgba(0,0,0,0.5)',
|
|
scrollOffset: 0,
|
|
})
|
|
</script>
|
|
|
|
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|