@icij/murmur-next 4.0.0

package/docs/pages/components/textured-deck/doc.md

@@ -0,0 +1,78 @@
+---
+badge: unstable
+---
+
+
+<div class="bg-dark text-light p-3 mb-5 sticky-top">
+  <b-form-checkbox class="text-nowrap" switch v-model="black">
+    Use black monochromic version of each texture.
+  </b-form-checkbox>
+</div>
+
+:::sample-card
+<div>
+  <textured-deck class="p-5 m-4" :black="black">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </textured-deck>
+</div>
+:::
+
+:::sample-card
+<div>
+  <textured-deck value="brick" class="p-5 m-4 row no-gutters align-items-center" :black="black">
+    <div class="col">
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div class="col-4 text-center">
+      <b-button variant="primary" class="text-dark">
+        Donate now  
+      </b-button>
+    </div>
+  </textured-deck>
+</div>
+:::
+
+:::sample-card
+<div>
+  <textured-deck value="rock" class="p-5 m-4" :black="black">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </textured-deck>
+</div>
+:::
+
+:::sample-card
+<div>
+  <textured-deck tag="router-link" value="sand" class="p-5 m-4 d-block" to="/" :black="black">
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </textured-deck>
+</div>
+:::
+
+:::sample-card
+<div>
+  <textured-deck value="crack" class="p-5 m-4 d-flex align-items-center" :black="black">
+    <brand class="mr-5" />
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </textured-deck>
+</div>
+:::
+
+
+:::sample-card
+<div>
+  <textured-deck value="carbon" class="p-5 m-4" :black="black">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </textured-deck>
+</div>
+:::
+
+
+::: api-table components/TexturedDeck.vue :::
+
+<script>
+  export default {
+    data () {
+      return { black: false }
+    }
+  }
+</script>

package/docs/pages/components/tiny-pagination/doc.md

@@ -0,0 +1,92 @@
+---
+title: Tiny Pagination
+description: A tiny pagination component with the option to jump ahead to a specific page using a form input.
+---
+
+Default styling:
+
+:::sample-card
+<div class="p-2 text-center">
+  <tiny-pagination v-model="currentPage" :per-page="10" :total-rows="200" />
+</div>
+:::
+
+Different sizes:
+
+:::sample-card
+<div class="p-2 text-center">
+  <p>
+    <tiny-pagination v-model="currentPage" size="sm" :per-page="10" :total-rows="200" />
+  </p>
+  <p>
+    <tiny-pagination v-model="currentPage" size="md" :per-page="10" :total-rows="200" />
+  </p>
+  <p>
+    <tiny-pagination v-model="currentPage" size="lg" :per-page="10" :total-rows="200" />
+  </p>
+</div>
+:::
+
+Hide navigations buttons:
+
+:::sample-card
+<div class="p-2 text-center">
+  <tiny-pagination v-model="currentPage" no-nav :per-page="10" :total-rows="200" />
+</div>
+:::
+
+Use compact mode:
+
+:::sample-card
+<div class="p-2 text-center">
+  <tiny-pagination v-model="currentPage" compact :per-page="10" :total-rows="200" />
+</div>
+:::
+
+Or display as a block (here with some additional background and border):
+
+:::sample-card
+<div class="p-5 text-center">
+  <tiny-pagination v-model="currentPage" block class="border bg-white p-1 shadow" :per-page="10" :total-rows="200" />
+</div>
+:::
+
+And finally, with custom navigation button icons and variant:
+
+:::sample-card
+<div class="p-5 text-center">
+  <tiny-pagination 
+    v-model="currentPage" 
+    block
+    class="border bg-dark text-light p-1 shadow" 
+    previous-page-icon="arrow-left"
+    next-page-icon="arrow-right"
+    nav-variant="dark"
+    size="sm"
+    :per-page="10" 
+    :total-rows="200" />
+</div>
+:::
+
+::: api-table components/TinyPagination.vue :::
+
+<script>
+  import { faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+  import { library } from '@/components/Fa'
+
+  export default {
+    data () {
+      return {
+        currentPage: 1
+      }
+    },
+    beforeMount() {
+      library.add(faArrowRight, faArrowLeft)
+    },
+    watch: {
+      currentPage (page) {
+        this.$router.push({ query: { page } })
+      }
+    }
+  }
+</script>

package/docs/pages/datavisualisation/bars/doc.md

@@ -0,0 +1,110 @@
+---
+badge: unstable
+---
+
+Component do draw dead simple bar charts.
+
+:::sample-card
+<div class="m-4">
+  <h4>Breast implant patients kept in the dark about potential risks</h4>
+  <p class="text-muted">
+    More than 300 people around the world who responded to an ICIJ survey said they were not aware of the dangers of breast implants prior to their surgeries.
+  </p>
+  <bar-chart :data="dataUrl" class="mt-4" />
+</div>
+:::
+
+<collapsible-block label="Show the data structure">
+
+```json
+[
+  {
+    "label": "Warned about local complications",
+    "value": 52
+  },
+  {
+    "label": "Not warned",
+    "value": 42
+  },
+  {
+    "label": "Warned thoroughly",
+    "value": 1
+  },
+  {
+    "label": "Other",
+    "value": 6
+  }
+]
+```
+
+</collapsible-block>
+
+It's also possible to highlight a value:
+
+:::sample-card
+<div class="m-4">
+  <h4>Breast implant patients kept in the dark about potential risks</h4>
+  <p class="text-muted">
+    More than 300 people around the world who responded to an ICIJ survey said they were not aware of the dangers of breast implants prior to their surgeries.
+  </p>
+  <bar-chart :data="dataWithHighlight" class="mt-4" />
+</div>
+:::
+
+<collapsible-block label="Show the data structure">
+
+```json
+[
+  {
+    "label": "Warned about local complications",
+    "value": 52
+  },
+  {
+    "label": "Not warned",
+    "value": 42,
+    "highlight": true
+  },
+  {
+    "label": "Warned thoroughly",
+    "value": 1
+  },
+  {
+    "label": "Other",
+    "value": 6
+  }
+]
+```
+
+</collapsible-block>
+
+
+::: api-table datavisualisations/BarChart.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+        dataUrl: "https://gist.githubusercontent.com/pirhoo/2308336d5f067ef7d84fec348fd63e29/raw/c0135f11e54e757187163dd0722b149a456c64b1/bars-icij-survey.json",
+        dataWithHighlight: [
+          {
+            "label": "Warned about local complications",
+            "value": 52
+          },
+          {
+            "label": "Not warned",
+            "value": 42,
+            "highlight": true
+          },
+          {
+            "label": "Warned thoroughly",
+            "value": 1
+          },
+          {
+            "label": "Other",
+            "value": 6
+          }
+        ]
+      }
+    }
+  }
+</script>

package/docs/pages/datavisualisation/columns/doc.md

@@ -0,0 +1,165 @@
+Component do draw dead simple column charts.
+
+:::sample-card
+<div class="m-4">
+  <h4>Breast implant companies buried evidence of injuries for years</h4>
+  <p class="text-muted">
+    Incidents were reported as routine events that did not require public disclosure. After the U.S. Food and Drug Administration tightened enforcement of its reporting rules in 2017, reports of injuries soared.
+  </p>
+  <column-chart :data="dataUrl" class="my-4" x-axis-tick-collapse hover></column-chart>
+  <p class="text-muted small">
+    Note: 2018 data includes January to June. Source: U.S. Food and Drug Administration, ICIJ analysis
+  </p>
+</div>
+:::
+
+<collapsible-block label="Show the data structure">
+
+```json
+[
+  {
+    "date": 2008,
+    "value": 371
+  },
+  {
+    "date": 2009,
+    "value": 187
+  },
+  {
+    "date": 2010,
+    "value": 188
+  },
+  {
+    "date": 2011,
+    "value": 191
+  },
+  {
+    "date": 2012,
+    "value": 237
+  },
+  {
+    "date": 2013,
+    "value": 193
+  },
+  {
+    "date": 2014,
+    "value": 171
+  },
+  {
+    "date": 2015,
+    "value": 206
+  },
+  {
+    "date": 2016,
+    "value": 339
+  },
+  {
+    "date": 2017,
+    "value": 4642,
+    "highlight": true
+  },
+  {
+    "date": 2018,
+    "value": 8345,
+    "highlight": true
+  }
+]
+
+```
+</collapsible-block>
+
+Or with discrete series:
+
+:::sample-card
+<div class="m-4">
+  <h4>Leaks size</h4>
+  <p class="text-muted">
+    Size of each ICIJ's leak.
+  </p>
+  <column-chart :data="discreteData" series-name="size" timeseries-key="leak" :y-axis-tick-format="humanReadableGb" :y-axis-ticks="4" :max-value="3000" class="my-4">
+    <template #tooltip="{ datum: { leak, size } }">
+      <span v-html="`The ${leak} investigation is ${humanReadableGb(size)}`"></span>
+    </template>
+  </column-chart>
+  <p class="text-muted small">
+    Source: ICIJ
+  </p>
+</div>
+:::
+
+<collapsible-block label="Show the data structure">
+
+```json
+[
+  { "leak": "Paradise Papers", "size": 1400 },
+  { "leak": "Panama Papers", "size": 2600 },
+  { "leak": "Swiss Leaks", "size": 3.3 },
+  { "leak": "LuxLeaks", "size": 4 },
+  { "leak": "Offshore Leaks", "size": 260 }
+]
+```
+
+</collapsible-block>
+
+It also works with dynamic height
+
+:::sample-card
+<div class="m-4">
+  <h4>Leaks size</h4>
+  <p class="text-muted">
+    Size of each ICIJ's leak.
+  </p>
+  <column-chart 
+    stripped
+    series-name="size" 
+    timeseries-key="leak"
+    @select="clicked = $event"
+    :fixed-height="fixedHeight"
+    :data="discreteData" 
+    :y-axis-tick-format="humanReadableGb" 
+    :y-axis-ticks="4" 
+    :max-value="3000" class="my-4">
+    <template #tooltip="{ datum: { leak, size } }">
+      <span v-html="`The ${leak} investigation is ${humanReadableGb(size)}`"></span>
+    </template>
+  </column-chart>
+  <p class="text-muted form-inline align-items-center">
+    <span class="ml-auto mr-3 d-inline-flex align-items-center">
+      Height: 
+      <b-form-select class="ml-2" size="sm" v-model="fixedHeight" :options="[150, 300, 450]" />
+    </span>
+    Source: ICIJ
+  </p>
+</div>
+:::
+
+
+::: api-table datavisualisations/ColumnChart.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+        clicked: null,
+        fixedHeight: 300,
+        dataUrl: "https://gist.githubusercontent.com/pirhoo/259a1a5159db4a665d0c043fac71beef/raw/e74087b06cd12be2b2d3a8ca995730e38719cd4b/colums-incidents.json",
+        discreteData: [
+          { leak: 'Paradise Papers', size: 1.4 * 1e3 },
+          { leak: 'Panama Papers', size: 2.6 * 1e3 },
+          { leak: 'Swiss Leaks', size: 3.3 },
+          { leak: 'LuxLeaks', size: 4 },
+          { leak: 'Offshore Leaks', size: 260 }
+        ]
+      }
+    },
+    methods: {
+      humanReadableGb (size) {
+        if (size >= 1e3) {
+          return `${size/1e3}TB`          
+        } else {          
+          return `${size}GB`
+        }
+      }
+    }
+  }
+</script>

package/docs/pages/datavisualisation/lines/doc.md

@@ -0,0 +1,139 @@
+Component do draw dead simple line charts.
+
+:::sample-card
+<div class="p-4">
+  <div class="d-flex align-items-baseline">
+    <h4>
+      High-risk devices are being approved faster in the US    
+    </h4>
+    <b-form-checkbox class="text-nowrap ml-4" switch v-model="socialMode">
+      Social mode
+    </b-form-checkbox>
+  </div>
+  <p class="text-muted">
+    The average time that it takes the Food and Drug Administration to review and approve a device through its pre-market approval process has dropped by more than 200 days since 1996.
+  </p>
+  <line-chart :data="dataUrl" class="my-4" :social-mode="socialMode" />
+  <p class="text-muted small">
+    Note: This chart shows the time, in days, between an application being received by the FDA and the device being approved. Source: U.S. Food and Drug Administration, ICIJ and AP analysis
+  </p>
+</div>
+:::
+
+<collapsible-block label="Show the data structure">
+
+```json
+[
+  {
+    "date": "1995",
+    "value": 284.1733871
+  },
+  {
+    "date": "1996",
+    "value": 262.2768595
+  },
+  {
+    "date": "1997",
+    "value": 196.8200456
+  },
+  {
+    "date": "1998",
+    "value": 162.8752475
+  },
+  {
+    "date": "1999",
+    "value": 136.9506399
+  },
+  {
+    "date": "2000",
+    "value": 124.3350877
+  },
+  {
+    "date": "2001",
+    "value": 125.4939024
+  },
+  {
+    "date": "2002",
+    "value": 122.1694656
+  },
+  {
+    "date": "2003",
+    "value": 111.5
+  },
+  {
+    "date": "2004",
+    "value": 127.8108974
+  },
+  {
+    "date": "2005",
+    "value": 96.66352624
+  },
+  {
+    "date": "2006",
+    "value": 94.98603352
+  },
+  {
+    "date": "2007",
+    "value": 104.7544803
+  },
+  {
+    "date": "2008",
+    "value": 100.3127517
+  },
+  {
+    "date": "2009",
+    "value": 96.34450402
+  },
+  {
+    "date": "2010",
+    "value": 85.1799458
+  },
+  {
+    "date": "2011",
+    "value": 96.70278777
+  },
+  {
+    "date": "2012",
+    "value": 88.19991705
+  },
+  {
+    "date": "2013",
+    "value": 79.83682187
+  },
+  {
+    "date": "2014",
+    "value": 78.45282258
+  },
+  {
+    "date": "2015",
+    "value": 84.64591978
+  },
+  {
+    "date": "2016",
+    "value": 79.61724542
+  },
+  {
+    "date": "2017",
+    "value": 68.62495399
+  },
+  {
+    "date": "2018",
+    "value": 67.30243261
+  }
+]
+```
+
+</collapsible-block>
+
+::: api-table datavisualisations/ColumnChart.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+        dataUrl: "https://gist.githubusercontent.com/pirhoo/a2cdb6de5e3e816c0e9d80226806a688/raw/da3fdf3488d6bd68c6cfd9b89943b750ac65fd33/line-approvals.json",
+        socialMode: false
+      }
+    }
+  }
+</script>