46 lines
11 KiB
JavaScript
46 lines
11 KiB
JavaScript
import{S as F,i as z,s as X,g as y,m as _,t as h,h as w,j as k,y as ee,D as te,X as ie,z as A,o as V,v as ae,b as g,F as I,c as G,d as D,e as ne,w as E,x as M,f as C,E as re,l as Y,u as H,p as J,q as K,C as N,n as se}from"./index-85f88930.js";import{g as Q,a as Z}from"./spread-8a54911c.js";import{p as oe,M as le,T as ce,S as q}from"./collect-stories-fa95313f.js";import{G as pe}from"./GraphicBlock-44d96d12.js";import{b as fe,w as de}from"./withParams-47e2ab71.js";import"./Block-d1b8152c.js";import"./PaddingReset-c34038dd.js";import"./Markdown-e31fd5d7.js";const me=`Easily add a responsive Datawrapper embed on your page.
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
import { DatawrapperChart } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<DatawrapperChart
|
|
title="Global abortion access"
|
|
ariaLabel="map"
|
|
id="abortion-rights-map"
|
|
src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html"
|
|
/>
|
|
\`\`\`
|
|
|
|
##### Getting the chart URL for \`src\`
|
|
|
|
Copy the source url for the Datawrapper chart in the \`src\` prop.
|
|
You can get this from the published url on Reuters Graphics.
|
|
|
|
- Publish the chart on Datawrapper.
|
|
- Go to the **Datawrapper charts** Teams channel, wait for the graphic to finish publishing.
|
|
- Inside **Embed code (for developers only)**, find and copy the url inside the \`src\` prop. (It ends in \`media-embed.html\`.)
|
|
|
|
**Note:** There is no need to update the url if you update the chart inside Datawrapper. Any changes will be automatically reflected.
|
|
`,ue=`By default, Datawrapper will export your chart with the chart chatter like title, description and notes.
|
|
|
|
At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.
|
|
|
|
Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.
|
|
`,he=r=>({}),B=r=>({}),ge=r=>({}),U=r=>({});function P(r){let t;const a=r[12].title,e=Y(a,r,r[14],U);return{c(){e&&e.c()},m(i,n){e&&e.m(i,n),t=!0},p(i,n){e&&e.p&&(!t||n&16384)&&H(e,a,i,i[14],t?K(a,i[14],n,ge):J(i[14]),U)},i(i){t||(h(e,i),t=!0)},o(i){w(e,i),t=!1},d(i){e&&e.d(i)}}}function j(r){let t;const a=r[12].notes,e=Y(a,r,r[14],B);return{c(){e&&e.c()},m(i,n){e&&e.m(i,n),t=!0},p(i,n){e&&e.p&&(!t||n&16384)&&H(e,a,i,i[14],t?K(a,i[14],n,he):J(i[14]),B)},i(i){t||(h(e,i),t=!0)},o(i){w(e,i),t=!1},d(i){e&&e.d(i)}}}function we(r){let t,a,e,i,n,u,f,p=r[11].title&&P(r),c=r[11].notes&&j(r);return{c(){p&&p.c(),t=A(),a=V("div"),e=V("iframe"),n=A(),c&&c.c(),u=ae(),g(e,"title",r[2]),g(e,"aria-label",r[4]),g(e,"id",r[5]),I(e.src,i=r[6])||g(e,"src",i),g(e,"scrolling",r[7]),g(e,"frameborder","0"),g(e,"data-chromatic","ignore"),G(e,"width","0"),G(e,"min-width","100%",1),G(e,"border","none"),g(a,"class","datawrapper-chart")},m(o,d){p&&p.m(o,d),D(o,t,d),D(o,a,d),ne(a,e),r[13](e),D(o,n,d),c&&c.m(o,d),D(o,u,d),f=!0},p(o,d){o[11].title?p?(p.p(o,d),d&2048&&h(p,1)):(p=P(o),p.c(),h(p,1),p.m(t.parentNode,t)):p&&(E(),w(p,1,1,()=>{p=null}),M()),(!f||d&4)&&g(e,"title",o[2]),(!f||d&16)&&g(e,"aria-label",o[4]),(!f||d&32)&&g(e,"id",o[5]),(!f||d&64&&!I(e.src,i=o[6]))&&g(e,"src",i),(!f||d&128)&&g(e,"scrolling",o[7]),o[11].notes?c?(c.p(o,d),d&2048&&h(c,1)):(c=j(o),c.c(),h(c,1),c.m(u.parentNode,u)):c&&(E(),w(c,1,1,()=>{c=null}),M())},i(o){f||(h(p),h(c),f=!0)},o(o){w(p),w(c),f=!1},d(o){o&&(C(t),C(a),C(n),C(u)),p&&p.d(o),r[13](null),c&&c.d(o)}}}function be(r){let t,a;return t=new pe({props:{width:r[8],textWidth:r[9],title:r[0],description:r[1],notes:r[3],$$slots:{default:[we]},$$scope:{ctx:r}}}),{c(){y(t.$$.fragment)},m(e,i){_(t,e,i),a=!0},p(e,[i]){const n={};i&256&&(n.width=e[8]),i&512&&(n.textWidth=e[9]),i&1&&(n.title=e[0]),i&2&&(n.description=e[1]),i&8&&(n.notes=e[3]),i&19700&&(n.$$scope={dirty:i,ctx:e}),t.$set(n)},i(e){a||(h(t.$$.fragment,e),a=!0)},o(e){w(t.$$.fragment,e),a=!1},d(e){k(t,e)}}}function ye(r,t,a){let e,{$$slots:i={},$$scope:n}=t;const u=ee(i);let{title:f=null}=t,{description:p=null}=t,{frameTitle:c=""}=t,{notes:o=null}=t,{ariaLabel:d=""}=t,{id:v=""}=t,{src:s}=t,{scrolling:m="no"}=t,{width:W="normal"}=t,{textWidth:T="normal"}=t,b;te(()=>{typeof window<"u"&&window.addEventListener("message",e)}),ie(()=>{typeof window<"u"&&window.removeEventListener("message",e)});function $(l){re[l?"unshift":"push"](()=>{b=l,a(10,b)})}return r.$$set=l=>{"title"in l&&a(0,f=l.title),"description"in l&&a(1,p=l.description),"frameTitle"in l&&a(2,c=l.frameTitle),"notes"in l&&a(3,o=l.notes),"ariaLabel"in l&&a(4,d=l.ariaLabel),"id"in l&&a(5,v=l.id),"src"in l&&a(6,s=l.src),"scrolling"in l&&a(7,m=l.scrolling),"width"in l&&a(8,W=l.width),"textWidth"in l&&a(9,T=l.textWidth),"$$scope"in l&&a(14,n=l.$$scope)},r.$$.update=()=>{r.$$.dirty&1024&&(e=l=>{if(l.data["datawrapper-height"]!==void 0){const R=[b];for(const x in l.data["datawrapper-height"])for(let S=0;S<R.length;S++)R[S].contentWindow===l.source&&(R[S].style.height=l.data["datawrapper-height"][x]+"px")}})},[f,p,c,o,d,v,s,m,W,T,b,u,i,$,n]}class L extends F{constructor(t){super(),z(this,t,ye,be,X,{title:0,description:1,frameTitle:2,notes:3,ariaLabel:4,id:5,src:6,scrolling:7,width:8,textWidth:9})}}L.__docgen={version:3,name:"DatawrapperChart.svelte",data:[{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Title of the graphic",name:"title",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Description of the graphic, passed in as a markdown string.",name:"description",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"required",description:""}],visibility:"public",description:"iframe title",name:"frameTitle",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Notes to the graphic, passed in as a markdown string.",name:"notes",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"required",description:""}],visibility:"public",description:"iframe aria label",name:"ariaLabel",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[],visibility:"public",description:"iframe id",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"required",description:""}],visibility:"public",description:"Datawrapper embed URL",name:"src",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{keywords:[],visibility:"public",description:"iframe scrolling option",name:"scrolling",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"no"},{keywords:[],visibility:"public",description:"Width of the chart within the text well.",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:`Set a different width for the text within the text well, for example,
|
|
"normal" to keep the title, description and notes inline with the rest
|
|
of the text well. Can't ever be wider than \`width\`.`,name:"textWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Custom headline and chatter slot",name:"title"},{keywords:[],visibility:"public",description:"Custom notes and source slot",name:"notes"}],refs:[]};function _e(r){let t,a;const e=[r[1]];let i={};for(let n=0;n<e.length;n+=1)i=N(i,e[n]);return t=new L({props:i}),{c(){y(t.$$.fragment)},m(n,u){_(t,n,u),a=!0},p(n,u){const f=u&2?Q(e,[Z(n[1])]):{};t.$set(f)},i(n){a||(h(t.$$.fragment,n),a=!0)},o(n){w(t.$$.fragment,n),a=!1},d(n){k(t,n)}}}function ke(r){let t,a;return t=new L({props:{frameTitle:"Global abortion access",ariaLabel:"map",id:"abortion-rights-map",src:"https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html",title:"Global abortion access",description:"A map of worldwide access to abortion.",notes:`Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.
|
|
|
|
Source: Center for Reproductive Rights`}}),{c(){y(t.$$.fragment)},m(e,i){_(t,e,i),a=!0},p:se,i(e){a||(h(t.$$.fragment,e),a=!0)},o(e){w(t.$$.fragment,e),a=!1},d(e){k(t,e)}}}function De(r){let t,a,e,i,n,u,f,p;const c=[{title:"Components/DatawrapperChart"},{component:L},r[0]];let o={};for(let s=0;s<c.length;s+=1)o=N(o,c[s]);t=new le({props:o}),e=new ce({props:{$$slots:{default:[_e,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:r}}}),n=new q({props:{name:"Default",args:{src:"https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html",id:"abortion-rights-map",ariaLabel:"map",frameTitle:"Global abortion access"}}});const d=[{name:"With chatter"},fe(ue)];let v={$$slots:{default:[ke]},$$scope:{ctx:r}};for(let s=0;s<d.length;s+=1)v=N(v,d[s]);return f=new q({props:v}),{c(){y(t.$$.fragment),a=A(),y(e.$$.fragment),i=A(),y(n.$$.fragment),u=A(),y(f.$$.fragment)},m(s,m){_(t,s,m),D(s,a,m),_(e,s,m),D(s,i,m),_(n,s,m),D(s,u,m),_(f,s,m),p=!0},p(s,[m]){const W=m&1?Q(c,[c[0],c[1],Z(s[0])]):{};t.$set(W);const T={};m&6&&(T.$$scope={dirty:m,ctx:s}),e.$set(T);const b={};m&4&&(b.$$scope={dirty:m,ctx:s}),f.$set(b)},i(s){p||(h(t.$$.fragment,s),h(e.$$.fragment,s),h(n.$$.fragment,s),h(f.$$.fragment,s),p=!0)},o(s){w(t.$$.fragment,s),w(e.$$.fragment,s),w(n.$$.fragment,s),w(f.$$.fragment,s),p=!1},d(s){s&&(C(a),C(i),C(u)),k(t,s),k(e,s),k(n,s),k(f,s)}}}function Ce(r){return[{...de(me),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class ve extends F{constructor(t){super(),z(this,t,Ce,De,X,{})}}const O=oe(ve,{meta:{title:"Components/DatawrapperChart"},stories:{"tpl:default":{name:"default",template:!0,source:"<DatawrapperChart {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},WithChatter:{name:"With chatter",template:!1,source:`<DatawrapperChart
|
|
frameTitle="Global abortion access"
|
|
ariaLabel="map"
|
|
id="abortion-rights-map"
|
|
src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
|
|
title="Global abortion access"
|
|
description="A map of worldwide access to abortion."
|
|
notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.
|
|
|
|
Source: Center for Reproductive Rights'}"
|
|
/>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","withChatterDocs","DatawrapperChart","withComponentDocs","withStoryDocs"]}),Oe=O.meta,Ve=["Default","WithChatter"],Ie=O.stories.Default,Ee=O.stories.WithChatter;export{Ie as Default,Ee as WithChatter,Ve as __namedExportsOrder,Oe as default};
|
|
//# sourceMappingURL=DatawrapperChart.stories-be9ff821.js.map
|