From e5c6c503630eb27dcc0221a80583e2789b674bd7 Mon Sep 17 00:00:00 2001
From: kjj6198 <kjj6198@gmail.com>
Date: Fri, 13 Nov 2020 01:25:34 +0900
Subject: [PATCH] responsive svg and chart config

---
 src/ByPlaceChart.svelte      |  4 +--
 src/MapTooltip.svelte        | 55 ++++++++++++++++++++++++++++++---
 src/PlaceChart.svelte        | 17 +++++++---
 src/RankingTable.svelte      | 17 ++++++++++
 src/RelationshipChart.svelte | 60 ++++++++++++++++++++++++++++++------
 src/Section.svelte           | 16 ++++++++++
 src/SexualCaseMap.svelte     | 25 +++++++++++++--
 src/TaiwanMap.svelte         |  3 +-
 src/YearSwitch.svelte        | 39 ++++++++++++++++++-----
 src/store/chartConfig.js     | 40 ++++++++++++++++++++++++
 src/store/direction.js       | 14 +++++++++
 src/store/viewport.js        | 26 ++++++++++++++++
 12 files changed, 285 insertions(+), 31 deletions(-)
 create mode 100644 src/store/chartConfig.js
 create mode 100644 src/store/direction.js
 create mode 100644 src/store/viewport.js

diff --git a/src/ByPlaceChart.svelte b/src/ByPlaceChart.svelte
index 811428a..d86d68e 100644
--- a/src/ByPlaceChart.svelte
+++ b/src/ByPlaceChart.svelte
@@ -1,10 +1,10 @@
 <script>
   import omit from "lodash/omit";
-  import step from "./utils/step";
   import place from "./place";
   import PlaceChart from "./PlaceChart.svelte";
   import YearSwitch from "./YearSwitch.svelte";
   import RankingTable from "./RankingTable.svelte";
+  import chartConfig from "./store/chartConfig";
   let currentYear = 2018;
 
   $: data = place.find((p) => p["年份"] === currentYear.toString());
@@ -45,7 +45,7 @@
   fillColor="var(--main)"
   barHeight={10}
   yTicks={Object.keys(omit(place[0], ['年份']))}
-  xTicks={step(0, 4500, 400)}
+  xTicks={$chartConfig.placeChart.xTicks}
   {data} />
 <RankingTable
   caption={currentYear}
diff --git a/src/MapTooltip.svelte b/src/MapTooltip.svelte
index 555370d..885e96c 100644
--- a/src/MapTooltip.svelte
+++ b/src/MapTooltip.svelte
@@ -1,6 +1,6 @@
 <script>
   import { tweened } from "svelte/motion";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { scale } from "svelte/transition";
   const male = tweened(0);
   const female = tweened(0);
@@ -10,15 +10,26 @@
     male.set(data["男"]);
     female.set(data["女"]);
   }
+
+  function handleKeydown(e) {
+    if (e.key === "Escape") {
+      dispatch("close");
+    }
+  }
+  onMount(() => {
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  });
   export let data;
 </script>
 
 <style>
   .tooltip {
     position: absolute;
-    top: 10%;
+    top: 15%;
     left: 30px;
-    width: 500px;
+    max-width: 500px;
+    width: 90%;
     padding: 20px;
     border-radius: 20px;
     background-color: #fff;
@@ -49,13 +60,49 @@
   .number {
     font-size: 2em;
   }
+
+  .close-btn {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 30px;
+    border: 0;
+    background: none;
+    border-radius: 3px;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .close-btn:hover {
+    background-color: rgba(100, 100, 100, 0.1);
+  }
+
+  @media screen and (max-width: 960px) {
+    .tooltip {
+      font-size: 14px;
+      top: 50%;
+    }
+
+    h3 {
+      font-size: 2rem;
+    }
+
+    .number {
+      font-size: 2rem;
+    }
+  }
 </style>
 
 <div
   class="tooltip"
   in:scale={{ duration: 350, delay: 500 }}
   out:scale={{ duration: 350, delay: 0 }}>
-  <button on:click={() => dispatch('close')}>close</button>
+  <button class="close-btn" on:click={() => dispatch('close')}>
+    <span aria-hidden="true">&times;</span>
+  </button>
   <h4>性侵害通報案件數 ({data['年份']}年)</h4>
   <h3>{data['縣市']}</h3>
   <ul>
diff --git a/src/PlaceChart.svelte b/src/PlaceChart.svelte
index 78a46a4..1890f67 100644
--- a/src/PlaceChart.svelte
+++ b/src/PlaceChart.svelte
@@ -2,16 +2,19 @@
   import { flip } from "svelte/animate";
   import SVG from "./SVG.svelte";
   import { scaleLinear, scaleBand } from "d3-scale";
+  import chartConfig from "./store/chartConfig";
   export let data;
   export let xTicks;
   export let yTicks;
   export let fillColor;
   export let barHeight = 10;
-  let width = 800;
-  let height = 600;
+  $: config = $chartConfig.placeChart;
 
-  let padding = {
-    left: 80,
+  $: width = config.width;
+  $: height = config.height;
+
+  $: padding = {
+    left: config.padding,
     bottom: 10,
     top: 10,
     right: 10,
@@ -54,7 +57,11 @@
         <line y1="-15" y2="-100%" />
       </g>
     {/each}
-    <text y={-20} x={width - padding.left}>(通報件數)</text>
+    <text
+      y={-20}
+      x={width - padding.left - $chartConfig.placeChart.xTickTextOffset}>
+      (通報件數)
+    </text>
   </g>
   <g transform="translate(0, 0)">
     {#each yTicks as tick, i}
diff --git a/src/RankingTable.svelte b/src/RankingTable.svelte
index 9ea0bc8..32b96c6 100644
--- a/src/RankingTable.svelte
+++ b/src/RankingTable.svelte
@@ -63,6 +63,23 @@
     color: var(--white);
     background-color: var(--em3);
   }
+
+  @media screen and (max-width: 960px) {
+    table {
+      font-size: 14px;
+    }
+    thead th,
+    tbody td {
+      padding: 5px 5px;
+    }
+
+    .no {
+      font-size: 12px;
+      line-height: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
 </style>
 
 <table>
diff --git a/src/RelationshipChart.svelte b/src/RelationshipChart.svelte
index ac3a327..3f8157a 100644
--- a/src/RelationshipChart.svelte
+++ b/src/RelationshipChart.svelte
@@ -1,32 +1,45 @@
 <script>
   import omit from "lodash/omit";
-  import pick from "lodash/pick";
   import BarChart from "./BarChart.svelte";
-  import RankingTable from "./RankingTable.svelte";
   import relation from "./relation";
+  import RelationModel from "./models/relation";
   import Tooltip from "./Tooltip.svelte";
   import colors from "./utils/colors";
   import step from "./utils/step";
   import YearSwitch from "./YearSwitch.svelte";
+  import RankingTable from "./RankingTable.svelte";
+  import chartConfig from "./store/chartConfig";
+  import viewport from "./store/viewport";
   let currentYear = 2018;
 
   $: currentData = relation[currentYear + "年"].filter(
     (d) => d["年齡層"] !== "總計"
   );
 
+  $: model = new RelationModel(currentData);
+
   let selected = [];
   let tooltip = false;
   let tooltipData;
   let tooltipPosition;
+
+  const headers = [
+    { name: "兩造關係", accessor: (d) => d[0], align: "left", width: "30%" },
+    {
+      name: "案件數 （排除其他與不詳）",
+      accessor: (d) => d[1],
+      align: "right",
+      type: "number",
+    },
+    {
+      name: "比例",
+      accessor: (d) => (model.getProbabilityFor(d[0]) * 100).toFixed(2) + "%",
+      align: "right",
+    },
+  ];
 </script>
 
 <style>
-  .block {
-    display: inline-block;
-    width: 30px;
-    height: 30px;
-  }
-
   .container {
     position: relative;
   }
@@ -43,6 +56,13 @@
   .active {
     color: var(--white);
   }
+
+  .spacer {
+    padding: 0;
+    margin: 50px 0;
+    height: 0;
+    border: 0;
+  }
 </style>
 
 <YearSwitch
@@ -73,8 +93,14 @@
           tooltip = true;
           tooltipData = e.detail.data;
           const bbox = e.detail.target.getBoundingClientRect();
-          tooltipPosition = { x: bbox.width + 120, y: bbox.top - 150 };
+          if ($viewport === 'mobile') {
+            tooltipPosition = { x: bbox.width + 80, y: bbox.top - 100 };
+          } else {
+            tooltipPosition = { x: bbox.width + 120, y: bbox.top - 150 };
+          }
         }}
+        width={$chartConfig.relationChart.width}
+        height={$chartConfig.relationChart.height}
         on:hide={() => {
           tooltip = false;
         }}
@@ -88,3 +114,19 @@
     {/if}
   </div>
 </YearSwitch>
+
+<hr class="spacer" />
+
+<YearSwitch
+  initialYear={currentYear}
+  years={Object.keys(relation)
+    .map((k) => k.replace('年', ''))
+    .map(Number)}
+  on:change={(e) => (currentYear = e.detail.year)}>
+  <div slot="chart">
+    <RankingTable
+      caption="受害者與加害者關係 （{currentYear} 年）"
+      {headers}
+      data={model.getRanking().slice(0, 10)} />
+  </div>
+</YearSwitch>
diff --git a/src/Section.svelte b/src/Section.svelte
index 538fda4..0ab43c5 100644
--- a/src/Section.svelte
+++ b/src/Section.svelte
@@ -9,6 +9,7 @@
 
 <style>
   section {
+    position: relative;
     width: 95%;
     margin: 4rem auto;
   }
@@ -24,9 +25,24 @@
   .large {
     max-width: 1200px;
   }
+
+  .issue {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 4rem;
+    color: #444;
+    opacity: 0.4;
+    font-family: Oswald;
+  }
+
+  .issue::before {
+    content: "#";
+  }
 </style>
 
 <section class={size}>
+  <span class="issue">{num}</span>
   <LabelTitle {title} id={title} type="anchor" />
 
   <p>{description}</p>
diff --git a/src/SexualCaseMap.svelte b/src/SexualCaseMap.svelte
index c0bc921..76c2178 100644
--- a/src/SexualCaseMap.svelte
+++ b/src/SexualCaseMap.svelte
@@ -5,7 +5,9 @@
   import TaiwanMap from "./TaiwanMap.svelte";
   import YearSwitch from "./YearSwitch.svelte";
   import data from "./data";
+  import taiwanCity from "./constants/taiwanCity";
   import MapTooltip from "./MapTooltip.svelte";
+  import Button from "./components/Button.svelte";
   let currentYear = 2019;
   let tooltipStatus = "closed";
   let currentCity = "";
@@ -22,12 +24,22 @@
       Math.max(...currentData.map((d) => d["合計"])),
     ])
     .range([93, 24]);
+
+  function openTooltip(city) {
+    currentCity = city;
+    tooltipStatus = "opened";
+    offset.set(120);
+  }
 </script>
 
 <style>
   .container {
     position: relative;
   }
+
+  .btn-group {
+    margin-bottom: 3em;
+  }
 </style>
 
 <div class="container">
@@ -36,13 +48,20 @@
     years={[2015, 2016, 2017, 2018, 2019]}
     on:change={(e) => (currentYear = e.detail.year)}>
     <div slot="chart">
+      <div class="btn-group">
+        {#each taiwanCity as city (city)}
+          <Button
+            style={city === currentCity ? 'filled' : 'primary'}
+            onClick={() => openTooltip(city)}>
+            {city}
+          </Button>
+        {/each}
+      </div>
       {#key currentYear}
         <TaiwanMap
           transform="translate({$offset}, 0)"
           on:selected={(e) => {
-            currentCity = e.detail;
-            tooltipStatus = 'opened';
-            offset.set(120);
+            openTooltip(e.detail);
           }}
           color={(d) => {
             const selected = currentData.find((c) => c['縣市'] === d);
diff --git a/src/TaiwanMap.svelte b/src/TaiwanMap.svelte
index 25a8a3e..90c3f66 100644
--- a/src/TaiwanMap.svelte
+++ b/src/TaiwanMap.svelte
@@ -5,6 +5,7 @@
   import toPair from "./utils/toPair";
   import polygonCentroid from "./utils/centroid";
   import hover from "./utils/useHover";
+  import viewport from "./store/viewport";
   export let color;
   export let transform;
   let current = "";
@@ -75,7 +76,7 @@
   }
 </style>
 
-<SVG viewBox="0 0 280 266">
+<SVG viewBox="0 0 {$viewport === 'mobile' ? 180 : 280} 266">
   <g {transform} fill="none" fill-rule="evenodd">
     <g
       stroke="#fff"
diff --git a/src/YearSwitch.svelte b/src/YearSwitch.svelte
index cb56f74..2aa1113 100644
--- a/src/YearSwitch.svelte
+++ b/src/YearSwitch.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { createEventDispatcher, afterUpdate, onMount } from "svelte";
+  import { createEventDispatcher, afterUpdate, onMount, tick } from "svelte";
   const dispatch = createEventDispatcher();
   export let years = [];
   export let initialYear = years[0];
-  
+
   let list;
   $: idx = years.findIndex((y) => y === initialYear) || 0;
 
@@ -13,6 +13,26 @@
     });
   }
 
+  onMount(() => {
+    const target = list.querySelector("[data-current=true]");
+    if (target) {
+      list.scrollLeft = target.offsetLeft;
+    }
+  });
+
+  afterUpdate(() => {
+    const target = list.querySelector("[data-current=true]");
+    if (target) {
+      if (target.offsetLeft - target.offsetWidth < list.scrollLeft) {
+        list.scrollLeft = target.offsetLeft - target.offsetWidth;
+      } else if (
+        target.offsetLeft + target.offsetWidth / 2 >
+        list.scrollLeft + list.clientWidth
+      ) {
+        list.scrollLeft = target.offsetLeft + target.offsetWidth;
+      }
+    }
+  });
 </script>
 
 <style>
@@ -28,8 +48,12 @@
     color: #444;
     font-size: 1.5rem;
     cursor: pointer;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  }
+
+  @media screen and (max-width: 960px) {
+    .title {
+      font-size: 1rem;
+    }
   }
 
   .title:focus {
@@ -40,7 +64,7 @@
   .next {
     vertical-align: super;
     line-height: 30px;
-    color: #444;
+    color: var(--main);
     padding: 0;
     margin: 0;
     width: 30px;
@@ -51,13 +75,14 @@
   }
 
   .active {
-    color: #27cca5;
+    color: var(--em3);
   }
 
   .list {
     position: relative;
     display: inline-block;
-    width: 600px;
+    width: 80%;
+    max-width: 600px;
     white-space: nowrap;
     overflow-x: hidden;
   }
diff --git a/src/store/chartConfig.js b/src/store/chartConfig.js
new file mode 100644
index 0000000..95d887c
--- /dev/null
+++ b/src/store/chartConfig.js
@@ -0,0 +1,40 @@
+import step from "../utils/step";
+import viewport from "./viewport";
+import { derived } from "svelte/store";
+
+export default derived(viewport, ($viewport, set) => {
+  const config = {
+    mobile: {
+      placeChart: {
+        textWidth: "20%",
+        xTickTextOffset: 30,
+        width: 350,
+        height: 700,
+        xTicks: step(0, 4500, 800),
+        padding: 70,
+      },
+      relationChart: {
+        width: 400,
+        height: 700,
+      },
+    },
+    desktop: {
+      relationChart: {
+        width: 850,
+        height: 700,
+      },
+      placeChart: {
+        xTickTextOffset: 0,
+        width: 800,
+        height: 650,
+        padding: 80,
+        xTicks: step(0, 4500, 400),
+      },
+    },
+  };
+  if ($viewport === "mobile" || $viewport === "tablet") {
+    set(config.mobile);
+  } else if (["laptop", "desktop"].includes($viewport)) {
+    set(config.desktop);
+  }
+});
diff --git a/src/store/direction.js b/src/store/direction.js
new file mode 100644
index 0000000..c254413
--- /dev/null
+++ b/src/store/direction.js
@@ -0,0 +1,14 @@
+import { readable } from "svelte/store";
+
+export default readable("portrait", (set) => {
+  if (window.matchMedia) {
+    const match = window.matchMedia("(orientation: landscape)");
+    match.addEventListener("change", (e) => {
+      if (e.matches) {
+        set("landscape");
+      } else {
+        set("portrait");
+      }
+    });
+  }
+});
diff --git a/src/store/viewport.js b/src/store/viewport.js
new file mode 100644
index 0000000..defa221
--- /dev/null
+++ b/src/store/viewport.js
@@ -0,0 +1,26 @@
+import { readable } from "svelte/store";
+
+export default readable("laptop", (set) => {
+  const query = {
+    mobile: "(max-width: 600px)",
+    tablet: "(min-width: 601px) and (max-width: 960px)",
+    laptop: "(min-width: 961px) and (max-width: 1200px)",
+    desktop: "(min-width: 1201px)",
+  };
+
+  if (window.matchMedia) {
+    Object.keys(query).forEach((key) => {
+      const match = window.matchMedia(query[key]);
+      match.addEventListener("change", (e) => {
+        if (e.matches) {
+          set(key);
+        }
+      });
+      if (match.matches) {
+        set(key);
+      }
+    });
+  } else {
+    set("desktop");
+  }
+});