@icij/murmur-next 4.0.0

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

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

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

@@ -0,0 +1,191 @@
+Component do draw dead simple stacked 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 FDA tightened enforcement of its reporting rules in 2017, reports of injuries soared.
+  </p>
+  <stacked-column-chart
+    :data="incidentReportsUrl"
+    :groups="incidentReportsGroups"
+    class="my-4"
+    y-axis-tick-format=",.0f" />  
+  <p class="text-muted small">
+    Source: U.S. Food and Drug Administration, ICIJ analysis
+  </p>
+</div>
+:::
+
+Or without direct-labeling:
+
+:::sample-card
+<div class="m-4">
+  <div class="d-flex align-items-baseline">
+    <h4>
+      Breast implant companies buried evidence of injuries for years
+    </h4>
+    <b-form-checkbox class="text-nowrap ml-4" switch v-model="socialMode">
+      Social mode
+    </b-form-checkbox>
+  </div>
+  <p class="text-muted">
+    Incidents were reported as routine events that did not require public disclosure. After the FDA tightened enforcement of its reporting rules in 2017, reports of injuries soared.
+  </p>
+  <stacked-column-chart :social-mode="socialMode" no-direct-labeling :data="incidentReportsUrl" y-axis-tick-format=",.0f" class="my-4" />  
+  <p class="text-muted small">
+    Source: U.S. Food and Drug Administration, ICIJ analysis
+  </p>
+</div>
+:::
+
+<collapsible-block label="Show the data structure">
+
+```json
+[
+   {
+      "date":2008,
+      "death":0,
+      "injury":300,
+      "malfunction":49
+   },
+   {
+      "date":2009,
+      "death":2,
+      "injury":138,
+      "malfunction":37
+   },
+   {
+      "date":2010,
+      "death":3,
+      "injury":109,
+      "malfunction":44
+   },
+   {
+      "date":2011,
+      "death":1,
+      "injury":141,
+      "malfunction":29
+   },
+   {
+      "date":2012,
+      "death":0,
+      "injury":175,
+      "malfunction":32
+   },
+   {
+      "date":2013,
+      "death":4,
+      "injury":130,
+      "malfunction":40
+   },
+   {
+      "date":2014,
+      "death":6,
+      "injury":122,
+      "malfunction":33
+   },
+   {
+      "date":2015,
+      "death":1,
+      "injury":163,
+      "malfunction":29
+   },
+   {
+      "date":2016,
+      "death":5,
+      "injury":304,
+      "malfunction":28
+   },
+   {
+      "date":2017,
+      "death":8,
+      "injury":2082,
+      "malfunction":48
+   },
+   {
+      "date":2018,
+      "death":7,
+      "injury":5185,
+      "malfunction":86
+   }
+]
+```
+
+</collapsible-block>
+
+You can also set the maximum value and use a different field for column's label:
+
+:::sample-card
+<div class="m-4">
+  <h4>
+    ICIJ Staff by office
+  </h4>
+  <p class="text-muted">As of April 2021. This list is more or less accurate.</p>
+  <stacked-column-chart :data="icijStaff" :max-value="10" no-tooltips labelField="city" hide-empty-values class="my-4" />  
+</div>
+:::
+
+<collapsible-block label="Show the data structure" :json="icijStaff" />
+
+It also work with single-value groups:
+
+:::sample-card
+<div class="m-4">
+  <h4>Leaks size</h4>
+  <p class="text-muted">
+    Size of ICIJ's leak.
+  </p>
+  <stacked-column-chart
+    :data="leaksSize"
+    :y-axis-tick-format="humanReadableGb"
+    :max-value="3000"
+    label-field="leak"
+    class="my-4"
+    bar-max-width="50%"
+    hide-legend
+    no-tooltips />
+  <p class="text-muted small">
+    Source: ICIJ
+  </p>
+</div>
+:::
+
+<collapsible-block label="Show the data structure" :json="leaksSize" />
+
+::: api-table datavisualisations/StackedColumnChart.vue :::
+
+<script>
+  export default {
+    data () {
+      return {
+        socialMode: false,
+        incidentReportsUrl: 'https://gist.githubusercontent.com/pirhoo/4055e8d1ee3016805eaf1d2feabdd895/raw/a3d2ba8e9d19fcd9fc659dab50ec075248178238/stacked-colums-incidents.json',
+        incidentReportsGroups: ['Deaths', 'Injuries', 'Malfunctions'],
+        icijStaff: [
+          { "city": "Washington DC", "developers": 1, "journalists": 6, "devops": 1, "finance": 1 },
+          { "city": "Paris ", "developers": 5, "journalists": 1, "devops": 0, "finance": 0 },
+          { "city": "Madrid ", "developers": 1, "journalists": 0, "devops": 4, "finance": 0 },
+          { "city": "New York City", "developers": 0, "journalists": 3, "devops": 0, "finance": 1 },
+          { "city": "Syndey", "developers": 0, "journalists": 2, "devops": 0, "finance": 1 },
+        ],
+        leaksSize: [        
+          { leak: 'Offshore Leaks (2013)', size: 260 },
+          { leak: 'Panama Papers (2016)', size: 2.6 * 1e3 },
+          { leak: 'Paradise Papers (2017)', size: 1.4 * 1e3 }
+        ]
+      }
+    },    
+    methods: {
+      humanReadableGb (size) {
+        if (size >= 1e3) {
+          return `${size/1e3}TB`          
+        } else {          
+          return `${size}GB`
+        }
+      }
+    }
+  }
+</script>

package/docs/pages/getting-started/about-icij/doc.md

@@ -0,0 +1,13 @@
+---
+title: About ICIJ
+order: 30
+---
+
+ICIJ is a [unique organization](https://www.icij.org/about/icijs-story/).
+A U.S.-based nonprofit, we are both **a small, resourceful newsroom** with our
+own reporting team, as well as a **global network of reporters and media
+organizations** who work together to investigate the most important stories in the world.
+
+<a class="btn btn-primary text-white text-uppercase fw-bold" target="_blank" href="https://www.icij.org/about/">
+  Read more about ICIJ
+</a>

package/docs/pages/getting-started/custom-bootstrap/doc.md

@@ -0,0 +1,36 @@
+---
+title: Customize Boostrap
+description: Use pre-configured variables to build Boostrap.
+order: 20
+---
+
+This guide comes with a set of pre-configured SCSS variables that can be used in
+conjunction with Boostrap. It is **not mandatory** to uses a custom build of Boostrap
+with these variables. Yet some components might have a better display with this configuration.
+
+```scss
+// You can easily override every variables
+$link-color: #c10448;
+
+// Then, simply import the variables before you import Bootstrap sources
+@import '@icij/murmur/lib/styles/variables.scss';
+@import 'node_modules/bootstrap/scss/bootstrap';
+// Optional but recommended: Bootstrap Vue CSS additions
+@import 'node_modules/bootstrap-vue/dist/bootstrap-vue.css';
+```
+
+Here are all the variables defined in <repository-link path="lib/styles/variables.scss">lib/styles/variables.scss</repository-link>:
+
+<pre class="bg-dark p-3"><code v-html="rawVariables"></code></pre>
+
+<script>
+import rawVariables from '@/styles/variables.scss?highlight=scss'
+
+export default {
+  data () {
+    return {
+      rawVariables
+    }
+  }
+}
+</script>

package/docs/pages/getting-started/installation-guide/doc.md

@@ -0,0 +1,59 @@
+---
+title: Installation Guide
+description: Murmur is ICIJ's Design System for Bootstrap 4 and Vue.js
+order: 10
+---
+
+The <a href="https://icij.org">International Consortium of Investigative Journalists</a>
+aims to build efficient and innovative tools for the biggest cross-border investigations in the world.
+In order to build stable, consistent and user-friendly webapps, our team
+started to define common components between projects, as well as best practices and
+guidelines.
+
+### Install the package
+
+If you are using module bundlers such as Webpack or Rollup, you might need to include the package into your project.
+To get started, use NPM or Yarn to get latest version of **@icij/murmur**.
+
+```bash
+# with NPM:
+npm i @icij/murmur
+
+# or with Yarn:
+yarn add @icij/murmur
+```
+Then, register Murmur as a pluggin in your app entry point:
+
+```js
+import Vue from 'vue'
+import Murmur from '@icij/murmur'
+
+Vue.use(Murmur)
+```
+
+And import the Murmur's stylesheet:
+
+```scss
+@import "@icij/murmur";
+```
+
+Now all components will be globally available in your app. Murmur also exposes a
+configuration object to handle common configuration option. To customize the
+default options please refer to the [dedicated page](#/utilities/config).
+
+If you need to usage component with images, please make sure to [configure assets](#/utilities/assets) properly so images are available in your final app bundle.
+
+### Individual components
+
+An alternative to installing all components with a pluggin is to import only
+a specific component.
+
+```js
+import { EmbedForm } from '@icij/murmur'
+
+Vue.component('component-name', {  
+  components: {
+    EmbedForm
+  }
+})
+```

package/docs/pages/getting-started/internationalization/doc.md

@@ -0,0 +1,74 @@
+---
+title: Internationalization
+description: Translate your components
+order: 30
+---
+
+### How it work
+
+Murmur can be translated using [vue-i18n](https://github.com/kazupon/vue-i18n).
+By default, we provide a series of locales in English for our components. The
+translation library is installed at a component level. So each component using
+translation received a `i18n` attribute.
+
+### Adding more locales
+
+Murmur exposes a static method to add new locales:
+
+```js
+import Murmur from '@icij/murmur'
+
+Murmur.setLocaleMessage('fr', {
+  "imddb-header": {
+    "navbar": {
+      "leak": "Contact confidentiel",
+      "support": "Soutenez nous",
+      "follow": "Suivez l'ICIJ"
+    }
+  }
+})
+```
+
+Then you can switch to a new language easily:
+
+```js
+Murmur.setLocale('fr')
+```
+
+### Overiding locales
+
+In the very same fashion, you can modify existing locales:
+
+```js
+import Murmur from '@icij/murmur'
+
+Murmur.mergeLocaleMessage('en', {
+  "imddb-header": {
+    "navbar": {
+      "leak": "SecureDrop",
+      "support": "Buy us a beer 🍺",
+      "follow": "Follow ICIJ"
+    }
+  }
+})
+```
+
+### Default locales
+
+Here are English locales defined in <repository-link path="lib/locales/en.json">lib/locales/en.json</repository-link>:
+
+<collapsible-block label="All English locales">
+  <pre class="bg-dark p-3 m-0"><code>{{ JSON.stringify(en, null, 2) }}</code></pre>
+</collapsible-block>
+
+<script>
+  import en from '@/locales/en.json'
+
+  export default {
+    data () {
+      return {
+        en
+      }
+    }
+  }
+</script>