@icij/murmur-next 4.0.0 → 4.0.1

package/stories/murmur/components/TinyPagination.stories.ts

@@ -1,65 +0,0 @@
-import { TinyPagination } from "@/components";
-import { StoryObj } from "@storybook/vue3";
-import {Size} from "@/enums";
-
-export default {
-    title: 'Murmur/components/TinyPagination',
-    component: TinyPagination,
-    tags: ['autodocs'],
-    argTypes: {
-        size:{control:"inline-radio",options:["sm","md","lg"]},
-        pages:{type:"number",min:0}
-    }
-};
-
-type Story = StoryObj<typeof TinyPagination>;
-const Template: Story = (args: any) => ({
-    components: { TinyPagination },
-    setup() {
-        return { args };
-    },
-    template: '<TinyPagination v-bind="args" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-    modelValue:1,
-    totalRows:200
-};
-
-export const Small = Template.bind({});
-Small.args = {
-    modelValue:1,
-    perPage:10,
-    totalRows:200,
-    size:Size.sm
-};
-
-export const Medium = Template.bind({});
-Medium.args = {
-    modelValue:1,
-    perPage:10,
-    totalRows:200,
-    size:Size.md
-};
-export const Large = Template.bind({});
-Large.args = {
-    modelValue:1,
-    perPage:10,
-    totalRows:200,
-    size:Size.lg
-};
-export const HideNavigation = Template.bind({});
-HideNavigation.args = {
-    modelValue:1,
-    perPage:10,
-    totalRows:200,
-    noNav:true
-};
-export const CompactMode = Template.bind({});
-CompactMode.args = {
-    modelValue:1,
-    perPage:10,
-    totalRows:200,
-    compact : true
-};

package/stories/murmur/datavisualisations/BarChart.stories.ts

@@ -1,54 +0,0 @@
-import { BarChart } from "@/datavisualisations";
-import { StoryObj } from "@storybook/vue3";
-
-export default {
-    title: 'Murmur/datavisualisations/BarChart',
-    component: BarChart,
-    tags: ['autodocs'],
-    argTypes: {
-    }
-};
-
-type Story = StoryObj<typeof BarChart>;
-const Template: Story = (args: any) => ({
-    components: { BarChart },
-    setup() {
-        return { args };
-    },
-    template: `<BarChart v-bind="args" />`
-});
-const breastImplantDecorator=()=>({template:`
-    <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>
-    <story/>`})
-export const Default = Template.bind({});
-Default.decorators=[breastImplantDecorator]
-Default.args = {
-    data:"https://gist.githubusercontent.com/pirhoo/2308336d5f067ef7d84fec348fd63e29/raw/c0135f11e54e757187163dd0722b149a456c64b1/bars-icij-survey.json"
-};
-const dataWithHighlight=[
-    {
-        "label": "Warned about local complications",
-        "value": 52
-    },
-    {
-        "label": "Not warned",
-        "value": 42,
-        "highlight": true
-    },
-    {
-        "label": "Warned thoroughly",
-        "value": 1
-    },
-    {
-        "label": "Other",
-        "value": 6
-    }
-]
-export const Highlight = Template.bind({});
-Highlight.decorators=[breastImplantDecorator]
-Highlight.args = {
-    data:dataWithHighlight
-};

package/stories/murmur/datavisualisations/ColumnChart.stories.ts

@@ -1,88 +0,0 @@
-import {ColumnChart} from "@/datavisualisations";
-import {StoryObj} from "@storybook/vue3";
-import {ref} from "vue";
-import {humanReadableGb} from "../utils";
-import {leakSizeDecorator} from "../decorators";
-
-export default {
-  title: 'Murmur/datavisualisations/ColumnChart',
-  component: ColumnChart,
-  tags: ['autodocs'],
-  argTypes: {}
-};
-
-type Story = StoryObj<typeof ColumnChart>;
-const Template: Story = (args: any) => ({
-  components: {ColumnChart},
-  setup() {
-    return {args};
-  },
-  template: `
-    <ColumnChart v-bind="args"/>`
-});
-
-const fixedHeight = 300
-const dataUrl = "https://gist.githubusercontent.com/pirhoo/259a1a5159db4a665d0c043fac71beef/raw/e74087b06cd12be2b2d3a8ca995730e38719cd4b/colums-incidents.json"
-const 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}
-]
-
-
-
-const leakInjuriesDecorator = () => ({
-    template: `
-  <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>
-  <story/>
-  <p class="text-muted small">
-    Note: 2018 data includes January to June. Source: U.S. Food and Drug Administration, ICIJ analysis
-  </p>`
-})
-export const Default = Template.bind({})
-Default.decorators = [ leakInjuriesDecorator]
-Default.args = {
-    data:dataUrl,
-    xAxisTickCollapse:true,
-    hover:true
-}
-export const TooltipSlot: Story = (args: any) => ({
-  components: {ColumnChart},
-  setup() {
-    return { args};
-  },
-  template: `
-    <column-chart v-bind="args">
-      <template #tooltip="{ datum: { leak, size } }">
-        <span>The {{ leak }} investigation is {{ args.yAxisTickFormat(size)}}</span>
-      </template>
-    </column-chart>`
-});
-TooltipSlot.decorators = [leakSizeDecorator]
-
-
-TooltipSlot.args = {
-    data: discreteData,
-    seriesName: "size",
-    timeseriesKey: "leak",
-    yAxisTickFormat: humanReadableGb,
-    yAxisYTicks: 4,
-    maxValue: 3000
-};
-export const DynamicHeight = TooltipSlot.bind({})
-const clicked=ref(null)
-DynamicHeight.args = {
-    data: discreteData,
-    seriesName: "size",
-    timeseriesKey: "leak",
-    yAxisTickFormat: humanReadableGb,
-    yAxisYTicks: 4,
-    maxValue: 3000,
-    stripped:true,
-    fixedHeight:fixedHeight
-}

package/stories/murmur/datavisualisations/LineChart.stories.ts

@@ -1,139 +0,0 @@
-import { LineChart } from "@/datavisualisations";
-import { StoryObj } from "@storybook/vue3";
-
-export default {
-    title: 'Murmur/datavisualisations/LineChart',
-    component: LineChart,
-    tags: ['autodocs'],
-    argTypes: {
-    }
-};
-
-type Story = StoryObj<typeof LineChart>;
-const Template: Story = (args: any) => ({
-    components: { LineChart },
-    setup() {
-        return { args };
-    },
-    template: `<LineChart v-bind="args" />`
-});
-
-const dataUrl="https://gist.githubusercontent.com/pirhoo/a2cdb6de5e3e816c0e9d80226806a688/raw/da3fdf3488d6bd68c6cfd9b89943b750ac65fd33/line-approvals.json"
-const data =[
-    {
-        "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
-    }
-]
-const leakDevicesDecorator = () => ({
-    template: `
- <div class="d-flex align-items-baseline">
-    <h4>
-      High-risk devices are being approved faster in the US    
-    </h4>
-  </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>
-  <story/>
-  <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>`
-})
-export const Default = Template.bind({});
-Default.decorators = [ leakDevicesDecorator]
-Default.args = {
-    data:dataUrl
-};

package/stories/murmur/datavisualisations/StackedBarChart.stories.ts

@@ -1,199 +0,0 @@
-import { StackedBarChart } from "@/datavisualisations";
-import { StoryObj } from "@storybook/vue3";
-import {humanReadableGb} from "../utils";
-import {h} from "vue";
-
-export default {
-    title: 'Murmur/datavisualisations/StackedBarChart',
-    component: StackedBarChart,
-    tags: ['autodocs'],
-    argTypes: {
-    }
-};
-
-type Story = StoryObj<typeof StackedBarChart>;
-const Template: Story = (args: any) => ({
-    components: { StackedBarChart },
-    setup() {
-        return { args };
-    },
-    template: `<StackedBarChart v-bind="args" >
-      {{args['header-right'].toString()}}
-      <template #header-left v-if="args['header-left']">${args['header-left']}</template>
-      <template #header-right v-if="args['header-right']!==null">${args['header-right']?.({sortBy:args.sortBy})??''}</template>
-    </StackedBarChart>`
-});
-const leakIncidentsDecorator = () => ({
-    template: `
-  <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>
-  <story/>
-  <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 small">
-    Source: ICIJ.
-  </p>`
-})
-const data = {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 }
-    ]}
-export const Default = Template.bind({});
-Default.decorators=[leakIncidentsDecorator]
-Default.args = {
-  data:data.incidentReports,
-};
-export const LabelAbove = Template.bind({});
-LabelAbove.decorators=[leakIncidentsDecorator]
-LabelAbove.args = {
-  data:data.incidentReports,
-  labelAbove:true
-};
-const leaksSizeDecorator = () => ({
-  template: `
-   <h4>Leaks size</h4>
-  <p class="text-muted">
-    Size of each leak in GB.
-  </p>
-  <story/>`
-})
-
-export const FixedHeightHideLegend = Template.bind({});
-FixedHeightHideLegend.decorators=[leaksSizeDecorator]
-FixedHeightHideLegend.args = {
-  data:data.leakSizes,
-  fixedHeight:400,
-  xAxisTickFormat:humanReadableGb,
-  hideLegend:true
-};
-
-
-export const hideEmptyValues = Template.bind({});
-hideEmptyValues.decorators=[]
-hideEmptyValues.args = {
-  data:data.moviesUrl,
-  labelField:"movie",
-  groups:data.groups,
-  hideEmptyValues:true
-};
-export const sortByKey = Template.bind({});
-sortByKey.decorators=[]
-sortByKey.args = {
-  data:data.moviesUrl,
-  labelField:"movie",
-  sortBy:data.sortKey,
-  groups:data.groups,
-};
-sortByKey.argTypes={
-  sortBy:{control:"select",options:data.sortKeys}
-}
-export const relativeValues = Template.bind({});
-relativeValues.decorators=[]
-relativeValues.args = {
-  data:data.moviesUrl,
-  labelField:"movie",
-  sortBy:data.sortKey,
-  groups:data.groups,
-  relative:true
-};
-
-export const HeaderLeft = Template.bind({});
-HeaderLeft.decorators=[leakIncidentsDecorator]
-HeaderLeft.args = {
-  data:data.leakSizes,
-  fixedHeight:400,
-  xAxisTickFormat:humanReadableGb,
-  hideLegend:false,
-  'header-left':"<h1>Header Left</h1>",
-};
-
-HeaderLeft.argTypes={
-  sortBy:{control:"select",options:data.sortKeys}
-}
-
-export const HeaderRight = Template.bind({});
-HeaderRight.decorators=[leakIncidentsDecorator]
-HeaderRight.args = {
-  data:data.moviesUrl,
-  labelField:"movie",
-  sortBy:data.sortKey,
-  hideEmptyValues:true,
-  relative:true,
-  groups:data.groups,
-  hideLegend:true,
-  'header-right':({sortBy}:{sortBy:string})=>`<div class="ms-auto d-flex  align-items-center p-0">
-        <label class="m-2 d-flex align-items-center">
-          Sort by  ${sortBy}
-        </label>
-      </div>`
-};
-
-HeaderRight.argTypes={
-  sortBy:{control:"select",options:data.sortKeys}
-}

package/stories/murmur/datavisualisations/StackedColumnChart.stories.ts

@@ -1,136 +0,0 @@
-import { StackedColumnChart } from "@/datavisualisations";
-import { StoryObj } from "@storybook/vue3";
-import {leakSizeDecorator} from "../decorators";
-import {humanReadableGb} from "../utils";
-
-export default {
-    title: 'Murmur/datavisualisations/StackedColumnChart',
-    component: StackedColumnChart,
-    tags: ['autodocs'],
-    argTypes: {
-    }
-};
-
-type Story = StoryObj<typeof StackedColumnChart>;
-const Template: Story = (args: any) => ({
-    components: { StackedColumnChart },
-    setup() {
-        return { args };
-    },
-    template: `<StackedColumnChart v-bind="args" />`
-});
-const data = {
-    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 }
-    ]
-}
-
-const leakIncidentsDecorator = () => ({
-    template: `
-  <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>
-
-   <story/>
-  <p class="text-muted small">
-    Source: U.S. Food and Drug Administration, ICIJ analysis
-  </p>`
-})
-
-const icijOfficesDecorator = () => ({
-    template: `
-  <h4>
-    ICIJ Staff by office
-  </h4>
-  <p class="text-muted">As of April 2021. This list is more or less accurate.</p>
-   <story/>
-`
-})
-export const Default = Template.bind({});
-Default.decorators=[leakIncidentsDecorator]
-Default.args = {
-data:data.incidentReportsUrl,
-groups:data.incidentReportsGroups,
-yAxisTickFormat:",.0f"
-};
-export const NoDirectLabeling = Template.bind({});
-NoDirectLabeling.decorators=[leakIncidentsDecorator]
-NoDirectLabeling.args = {
-    data:data.incidentReportsUrl,
-    groups:data.incidentReportsGroups,
-    noDirectLabeling:true
-};
-export const ColumnLabelField = Template.bind({});
-ColumnLabelField.decorators=[icijOfficesDecorator]
-ColumnLabelField.args = {
-    data:data.icijStaff,
-    labelField:"city",
-};
-export const HideEmptyValues = Template.bind({});
-ColumnLabelField.decorators=[icijOfficesDecorator]
-ColumnLabelField.args = {
-    data:data.icijStaff,
-    hideEmptyValues:true,
-    labelField:"city",
-};
-export const MaxValue = Template.bind({});
-MaxValue.decorators=[icijOfficesDecorator]
-MaxValue.args = {
-    data:data.icijStaff,
-    hideEmptyValues:true,
-    labelField:"city",
-    maxValue:"10",
-};
-export const NoTooltips = Template.bind({});
-NoTooltips.decorators=[icijOfficesDecorator]
-NoTooltips.args = {
-    data:data.icijStaff,
-    noTooltips:true,
-    hideEmptyValues:true,
-    labelField:"city",
-    maxValue:"10",
-};
-export const SingleValueProp = Template.bind({});
-SingleValueProp.decorators=[leakSizeDecorator]
-SingleValueProp.args = {
-    data:data.leaksSize,
-    yAxisTickFormat: humanReadableGb,
-    noTooltips:true,
-    labelField:"leak",
-    maxValue:"3000",
-};
-export const HideLegend = Template.bind({});
-HideLegend.decorators=[leakSizeDecorator]
-HideLegend.args = {
-    data:data.leaksSize,
-    yAxisTickFormat: humanReadableGb,
-    noTooltips:true,
-    labelField:"leak",
-    maxValue:"3000",
-    hideLegend:true
-};
-export const BarMaxWidth = Template.bind({});
-BarMaxWidth.decorators=[leakSizeDecorator]
-BarMaxWidth.args = {
-    data:data.leaksSize,
-    yAxisTickFormat: humanReadableGb,
-    noTooltips:true,
-    labelField:"leak",
-    maxValue:"3000",
-    barMaxWidth:"50%",
-    hideLegend:true
-};