@icij/murmur-next 4.0.0 → 4.0.3

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

@@ -1,92 +0,0 @@
----
-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

@@ -1,110 +0,0 @@
----
-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

@@ -1,165 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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>

package/docs/pages/datavisualisation/stacked-bar/doc.md

@@ -1,160 +0,0 @@
-Component do draw dead simple stacked bar charts.
-
-:::sample-card
-<div class="m-4">
-  <h4>
-    Medical device companies reported tens of thousands of incidents in 2017  
-  </h4>
-  <p class="text-muted">
-    Companies must report when a patient has potentially been hurt or killed by one of their medical devices.
-  </p>
-  <stacked-bar-chart
-    :data="incidentReports"
-    class="my-4"
-    label-above />  
-  <p class="text-muted small">
-    Note: The companies shown here are 10 of the biggest participants in the medical device industry. Numbers for Becton, Dickinson and Company include adverse events reported by C. R. Bard, which was acquired in 2017. Source: U.S. Food and Drug Administration, ICIJ analysis.
-  </p>
-  <p class="text-muted">
-    Source: ICIJ
-  </p>
-</div>
-:::
-
-<collapsible-block label="Show the data structure" :json="incidentReports" />
-
-Or a more advanced example:
-
-:::sample-card
-<div class="m-4">
-  <h4>
-    How high-budget movies score in the box office?
-  </h4>
-  <stacked-bar-chart hide-empty-values :data="moviesUrl" label-field="movie" class="my-4" :sort-by="sortKey" :groups="groups" :relative="isRelative">  
-    <template #header-right>    
-      <div class="ml-auto d-flex border align-items-center p-0">
-        <div class="border-right">
-          <b-form-checkbox v-model="isRelative" class="m-2">
-            Relative
-          </b-form-checkbox>
-        </div>
-        <label class="m-2 d-flex align-items-center">
-          Sort by
-          <b-form-select v-model="sortKey" :options="sortKeys" size="sm" class="w-auto ml-2" required></b-form-select>
-        </label>
-      </div>
-    </template>
-  </stacked-bar-chart>
-</div>
-:::
-
-Or with a fixed height:
-
-:::sample-card
-<div class="m-4">
-  <h4>Leaks size</h4>
-  <p class="text-muted">
-    Size of each leak in GB.
-  </p>
-  <stacked-bar-chart 
-    class="mb-4" 
-    hide-legend 
-    :data="leakSizes" 
-    :fixed-height="fixedHeight" 
-    :x-axis-tick-format="humanReadableGb" />
-
-  <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="[200, 300, 400]" />
-    </span>
-    Source: ICIJ
-  </p>
-  
-</div>
-:::
-
-::: api-table datavisualisations/StackedBarChart.vue :::
-
-<script>
-  export default {
-    data () {
-      return {        
-        fixedHeight: 400,
-        incidentReports: [
-           {
-              "label":"Medtronic PLC",
-              "injury":71444,
-              "death":1828
-           },
-           {
-              "label":"Abbott Laboratories",
-              "injury":40200,
-              "death":2816
-           },
-           {
-              "label":"Johnson & Johnson",
-              "injury":25863,
-              "death":104
-           },
-           {
-              "label":"Boston Scientific",
-              "injury":20509,
-              "death":725
-           },
-           {
-              "label":"Zimmer Biomet Holdings",
-              "injury":15733,
-              "death":146
-           },
-           {
-              "label":"Tandem Diabetes Care, Inc.",
-              "injury":13658,
-              "death":26
-           },
-           {
-              "label":"Stryker",
-              "injury":5102,
-              "death":90
-           },
-           {
-              "label":"Becton, Dickinson and Company",
-              "injury":3569,
-              "death":130
-           },
-           {
-              "label":"DexCom, Inc.",
-              "injury":1198,
-              "death":25
-           },
-           {
-              "label":"Philips",
-              "injury":450,
-              "death":268
-           }
-         ],
-         moviesUrl: "https://gist.githubusercontent.com/pirhoo/20ce1b795555210c926967a291f8a7ad/raw/13d972b7d2b98b174c33fff38aac2b7d69c85fa7/stacked-bars-movies.json",
-         isRelative: true,
-         sortKeys: ['movie', 'budget', 'box_office'],
-         sortKey: ['movie'],
-         groups: ['Budget', 'Box Office'],
-         leakSizes: [
-           { label: 'Paradise Papers', value: 1.4 * 1e3 },
-           { label: 'Panama Papers', value: 2.6 * 1e3 },
-           { label: 'Swiss Leaks', value: 3.3 },
-           { label: 'LuxLeaks', value: 4 },
-           { label: 'Offshore Leaks', value: 260 }
-         ]
-      }
-    },
-    methods: {
-      humanReadableGb (size) {
-        if (size >= 1e3) {
-          return `${size/1e3} TB`          
-        } else {          
-          return `${size} GB`
-        }
-      }
-    }
-  }
-</script>