From 3da173a2482a47e7a7d348a1ae4795be80aaa31e Mon Sep 17 00:00:00 2001
From: higsch <matthias.stahl87@web.de>
Date: Tue, 20 Oct 2020 00:10:50 +0200
Subject: [PATCH] google trends chart implemented

---
 src/components/BackgroundChart.svelte   |  6 ++
 src/components/CoronaChart.svelte       |  2 +-
 src/components/GoogleTrendsChart.svelte | 80 +++++++++++++++++++++++++
 src/components/Visualization.svelte     |  2 -
 src/utils/loadGoogleTrendsData.js       |  6 +-
 5 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 src/components/GoogleTrendsChart.svelte

diff --git a/src/components/BackgroundChart.svelte b/src/components/BackgroundChart.svelte
index 9d3d949..63a08d9 100644
--- a/src/components/BackgroundChart.svelte
+++ b/src/components/BackgroundChart.svelte
@@ -5,6 +5,7 @@
   import { margin } from '../stores/dimensions';
 
   import CoronaChart from './CoronaChart.svelte';
+  import GoogleTrendsChart from './GoogleTrendsChart.svelte';
 </script>
 
 <g class="background-chart">
@@ -14,6 +15,11 @@
                    margin={$margin}
                    showLegend={!$originalTimeDomain} />
     {/if}
+    {#if (/^gt_/.test(dataset.id))}
+      <GoogleTrendsChart data={dataset.data}
+                         margin={$margin}
+                         showLegend={!$originalTimeDomain} />
+    {/if}
   {/each}
 </g>
 
diff --git a/src/components/CoronaChart.svelte b/src/components/CoronaChart.svelte
index 1131212..4baf464 100644
--- a/src/components/CoronaChart.svelte
+++ b/src/components/CoronaChart.svelte
@@ -25,7 +25,7 @@
 
   $: if (data) {
     yScale = scaleLog()
-      .domain([1, max(data.map((d) => d.cases))])
+      .domain([1, max(data, (d) => d.cases)])
       .range([$panelHeight - margin.bottom, margin.top * 0.7]);
 
     area = (type, data) => d3area()
diff --git a/src/components/GoogleTrendsChart.svelte b/src/components/GoogleTrendsChart.svelte
new file mode 100644
index 0000000..a2dd354
--- /dev/null
+++ b/src/components/GoogleTrendsChart.svelte
@@ -0,0 +1,80 @@
+<script>
+  // chart with GoogleTrends data
+  import { timeScale } from '../stores/scales';
+  import { panelHeight } from '../stores/dimensions';
+  import { fade } from 'svelte/transition';
+  import {
+    scaleLinear,
+    max,
+    area as d3area,
+    format,
+    curveBasis } from 'd3';
+
+  export let data;
+  export let margin = {
+    top: 100,
+    right: 20,
+    bottom: 0,
+    left: 20
+  };
+  export let showLegend = true;
+
+  const commaFormat = format(',');
+
+  let xScale, yScale, area, ticks;
+  let casesPath, deathsPath;
+
+  $: if (data) {
+    yScale = scaleLinear()
+      .domain([0, max(data, (d) => d.value)])
+      .range([$panelHeight - margin.bottom, margin.top * 0.7]);
+
+    area = d3area()
+      .x((d) => $timeScale(d.date))
+      .y0(yScale(0))
+      .y1((d) => yScale(d.value))
+      .curve(curveBasis);
+
+    ticks = yScale.ticks(5).slice(1);
+  }
+</script>
+
+{#if (data)}
+  <g class="google-trends-chart"
+     transition:fade={{duration: 200}}>
+    <g class="area">
+      <path d={area(data)}></path>
+    </g>
+    <!-- {#if (showLegend)}
+      <g class="ticks"
+        transform="translate({$timeScale(data.slice(-1)[0].date) + 5} 0)">
+        {#each ticks as tick}
+          <g class="tick"
+            transform="translate(0 {yScale(tick)})">
+            <rect x="0" y="-12" width="25" height="15"></rect>
+            <text>{commaFormat(tick)}</text>
+          </g>
+        {/each}
+      </g>
+    {/if} -->
+  </g>
+{/if}
+
+<style>
+  path {
+    stroke: none;
+    opacity: 0.2;
+    fill: var(--usa-blue);
+  }
+
+  /* .tick rect {
+    fill: var(--bg);
+    stroke: none;
+  }
+
+  .tick text {
+    font-family: var(--font-02);
+    font-size: 0.6rem;
+    fill: var(--dfrlab-silver);
+  } */
+</style>
diff --git a/src/components/Visualization.svelte b/src/components/Visualization.svelte
index d9a89ac..2edd40e 100644
--- a/src/components/Visualization.svelte
+++ b/src/components/Visualization.svelte
@@ -108,8 +108,6 @@
       }
     ];
 
-    console.log($contextData[1].data)
-
     preloadImages(data);
 
     // apply filters from URL
diff --git a/src/utils/loadGoogleTrendsData.js b/src/utils/loadGoogleTrendsData.js
index e67ea88..53f3931 100644
--- a/src/utils/loadGoogleTrendsData.js
+++ b/src/utils/loadGoogleTrendsData.js
@@ -2,7 +2,11 @@ import { googleTrendsApiPath } from '../inputs/dataPaths';
 
 const loadGoogleTrendsData = async (keyword) => {
   const response = await fetch(`${googleTrendsApiPath}${encodeURIComponent(keyword)}`);
-  return(response.json());
+  const data = (await response.json()).map((d) => ({
+    ...d,
+    date: new Date(d.time * 1000)
+  }));
+  return(data);
 };
 
 export default loadGoogleTrendsData;