@daoyi/nmtl-ui 2.0.1-beta.8 → 2.0.1-beta.80

package/lib/components/BarChart.js

@@ -1 +1,762 @@
-import t,{useEffect as n}from"react";import{c as r}from"./index-b2745105.js";import e from"prop-types";import{q as a,f as i,g as o,h as u,j as c,p as l,r as s,u as f,v as h,w as d,s as m}from"./transform-0eb2d36e.js";import{s as g}from"./style-inject.es-1f59c1d0.js";function p(t,n,r){t=+t,n=+n,r=(a=arguments.length)<2?(n=t,t=0,1):a<3?1:+r;for(var e=-1,a=0|Math.max(0,Math.ceil((n-t)/r)),i=new Array(a);++e<a;)i[e]=t+e*r;return i}var v=Math.sqrt(50),M=Math.sqrt(10),y=Math.sqrt(2);function b(t,n,r){var e=(n-t)/Math.max(0,r),a=Math.floor(Math.log(e)/Math.LN10),i=e/Math.pow(10,a);return a>=0?(i>=v?10:i>=M?5:i>=y?2:1)*Math.pow(10,a):-Math.pow(10,-a)/(i>=v?10:i>=M?5:i>=y?2:1)}var w=Array.prototype.slice;function x(t){return t}function k(t){return"translate("+(t+.5)+",0)"}function N(t){return"translate(0,"+(t+.5)+")"}function A(t){return function(n){return+t(n)}}function C(t){var n=Math.max(0,t.bandwidth()-1)/2;return t.round()&&(n=Math.round(n)),function(r){return+t(r)+n}}function S(){return!this.__axis}function j(t,n){var r=[],e=null,a=null,i=6,o=6,u=3,c=1===t||4===t?-1:1,l=4===t||2===t?"x":"y",s=1===t||3===t?k:N;function f(f){var h=null==e?n.ticks?n.ticks.apply(n,r):n.domain():e,d=null==a?n.tickFormat?n.tickFormat.apply(n,r):x:a,m=Math.max(i,0)+u,g=n.range(),p=+g[0]+.5,v=+g[g.length-1]+.5,M=(n.bandwidth?C:A)(n.copy()),y=f.selection?f.selection():f,b=y.selectAll(".domain").data([null]),w=y.selectAll(".tick").data(h,n).order(),k=w.exit(),N=w.enter().append("g").attr("class","tick"),j=w.select("line"),z=w.select("text");b=b.merge(b.enter().insert("path",".tick").attr("class","domain").attr("stroke","currentColor")),w=w.merge(N),j=j.merge(N.append("line").attr("stroke","currentColor").attr(l+"2",c*i)),z=z.merge(N.append("text").attr("fill","currentColor").attr(l,c*m).attr("dy",1===t?"0em":3===t?"0.71em":"0.32em")),f!==y&&(b=b.transition(f),w=w.transition(f),j=j.transition(f),z=z.transition(f),k=k.transition(f).attr("opacity",1e-6).attr("transform",(function(t){return isFinite(t=M(t))?s(t):this.getAttribute("transform")})),N.attr("opacity",1e-6).attr("transform",(function(t){var n=this.parentNode.__axis;return s(n&&isFinite(n=n(t))?n:M(t))}))),k.remove(),b.attr("d",4===t||2==t?o?"M"+c*o+","+p+"H0.5V"+v+"H"+c*o:"M0.5,"+p+"V"+v:o?"M"+p+","+c*o+"V0.5H"+v+"V"+c*o:"M"+p+",0.5H"+v),w.attr("opacity",1).attr("transform",(function(t){return s(M(t))})),j.attr(l+"2",c*i),z.attr(l,c*m).text(d),y.filter(S).attr("fill","none").attr("font-size",10).attr("font-family","sans-serif").attr("text-anchor",2===t?"start":4===t?"end":"middle"),y.each((function(){this.__axis=M}))}return f.scale=function(t){return arguments.length?(n=t,f):n},f.ticks=function(){return r=w.call(arguments),f},f.tickArguments=function(t){return arguments.length?(r=null==t?[]:w.call(t),f):r.slice()},f.tickValues=function(t){return arguments.length?(e=null==t?null:w.call(t),f):e&&e.slice()},f.tickFormat=function(t){return arguments.length?(a=t,f):a},f.tickSize=function(t){return arguments.length?(i=o=+t,f):i},f.tickSizeInner=function(t){return arguments.length?(i=+t,f):i},f.tickSizeOuter=function(t){return arguments.length?(o=+t,f):o},f.tickPadding=function(t){return arguments.length?(u=+t,f):u},f}function z(t,n){n||(n=[]);var r,e=t?Math.min(n.length,t.length):0,a=n.slice();return function(i){for(r=0;r<e;++r)a[r]=t[r]*(1-i)+n[r]*i;return a}}function E(t,n){var r,e=n?n.length:0,a=t?Math.min(e,t.length):0,i=new Array(a),o=new Array(e);for(r=0;r<a;++r)i[r]=I(t[r],n[r]);for(;r<e;++r)o[r]=n[r];return function(t){for(r=0;r<a;++r)o[r]=i[r](t);return o}}function F(t,n){var r=new Date;return t=+t,n=+n,function(e){return r.setTime(t*(1-e)+n*e),r}}function _(t,n){var r,e={},a={};for(r in null!==t&&"object"==typeof t||(t={}),null!==n&&"object"==typeof n||(n={}),n)r in t?e[r]=I(t[r],n[r]):a[r]=n[r];return function(t){for(r in e)a[r]=e[r](t);return a}}function I(t,n){var r,e,l=typeof n;return null==n||"boolean"===l?a(n):("number"===l?i:"string"===l?(r=o(n))?(n=r,u):c:n instanceof o?u:n instanceof Date?F:(e=n,!ArrayBuffer.isView(e)||e instanceof DataView?Array.isArray(n)?E:"function"!=typeof n.valueOf&&"function"!=typeof n.toString||isNaN(n)?_:i:z))(t,n)}function L(t,n){return t=+t,n=+n,function(r){return Math.round(t*(1-r)+n*r)}}function V(t,n){if((r=(t=n?t.toExponential(n-1):t.toExponential()).indexOf("e"))<0)return null;var r,e=t.slice(0,r);return[e.length>1?e[0]+e.slice(2):e,+t.slice(r+1)]}function D(t){return(t=V(Math.abs(t)))?t[1]:NaN}var O,P=/^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;function B(t){if(!(n=P.exec(t)))throw new Error("invalid format: "+t);var n;return new $({fill:n[1],align:n[2],sign:n[3],symbol:n[4],zero:n[5],width:n[6],comma:n[7],precision:n[8]&&n[8].slice(1),trim:n[9],type:n[10]})}function $(t){this.fill=void 0===t.fill?" ":t.fill+"",this.align=void 0===t.align?">":t.align+"",this.sign=void 0===t.sign?"-":t.sign+"",this.symbol=void 0===t.symbol?"":t.symbol+"",this.zero=!!t.zero,this.width=void 0===t.width?void 0:+t.width,this.comma=!!t.comma,this.precision=void 0===t.precision?void 0:+t.precision,this.trim=!!t.trim,this.type=void 0===t.type?"":t.type+""}function q(t,n){var r=V(t,n);if(!r)return t+"";var e=r[0],a=r[1];return a<0?"0."+new Array(-a).join("0")+e:e.length>a+1?e.slice(0,a+1)+"."+e.slice(a+1):e+new Array(a-e.length+2).join("0")}B.prototype=$.prototype,$.prototype.toString=function(){return this.fill+this.align+this.sign+this.symbol+(this.zero?"0":"")+(void 0===this.width?"":Math.max(1,0|this.width))+(this.comma?",":"")+(void 0===this.precision?"":"."+Math.max(0,0|this.precision))+(this.trim?"~":"")+this.type};var H={"%":function(t,n){return(100*t).toFixed(n)},b:function(t){return Math.round(t).toString(2)},c:function(t){return t+""},d:function(t){return Math.abs(t=Math.round(t))>=1e21?t.toLocaleString("en").replace(/,/g,""):t.toString(10)},e:function(t,n){return t.toExponential(n)},f:function(t,n){return t.toFixed(n)},g:function(t,n){return t.toPrecision(n)},o:function(t){return Math.round(t).toString(8)},p:function(t,n){return q(100*t,n)},r:q,s:function(t,n){var r=V(t,n);if(!r)return t+"";var e=r[0],a=r[1],i=a-(O=3*Math.max(-8,Math.min(8,Math.floor(a/3))))+1,o=e.length;return i===o?e:i>o?e+new Array(i-o+1).join("0"):i>0?e.slice(0,i)+"."+e.slice(i):"0."+new Array(1-i).join("0")+V(t,Math.max(0,n+i-1))[0]},X:function(t){return Math.round(t).toString(16).toUpperCase()},x:function(t){return Math.round(t).toString(16)}};function Y(t){return t}var T,R,W,X=Array.prototype.map,G=["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];function U(t){var n,r,e=void 0===t.grouping||void 0===t.thousands?Y:(n=X.call(t.grouping,Number),r=t.thousands+"",function(t,e){for(var a=t.length,i=[],o=0,u=n[0],c=0;a>0&&u>0&&(c+u+1>e&&(u=Math.max(1,e-c)),i.push(t.substring(a-=u,a+u)),!((c+=u+1)>e));)u=n[o=(o+1)%n.length];return i.reverse().join(r)}),a=void 0===t.currency?"":t.currency[0]+"",i=void 0===t.currency?"":t.currency[1]+"",o=void 0===t.decimal?".":t.decimal+"",u=void 0===t.numerals?Y:function(t){return function(n){return n.replace(/[0-9]/g,(function(n){return t[+n]}))}}(X.call(t.numerals,String)),c=void 0===t.percent?"%":t.percent+"",l=void 0===t.minus?"-":t.minus+"",s=void 0===t.nan?"NaN":t.nan+"";function f(t){var n=(t=B(t)).fill,r=t.align,f=t.sign,h=t.symbol,d=t.zero,m=t.width,g=t.comma,p=t.precision,v=t.trim,M=t.type;"n"===M?(g=!0,M="g"):H[M]||(void 0===p&&(p=12),v=!0,M="g"),(d||"0"===n&&"="===r)&&(d=!0,n="0",r="=");var y="$"===h?a:"#"===h&&/[boxX]/.test(M)?"0"+M.toLowerCase():"",b="$"===h?i:/[%p]/.test(M)?c:"",w=H[M],x=/[defgprs%]/.test(M);function k(t){var a,i,c,h=y,k=b;if("c"===M)k=w(t)+k,t="";else{var N=(t=+t)<0||1/t<0;if(t=isNaN(t)?s:w(Math.abs(t),p),v&&(t=function(t){t:for(var n,r=t.length,e=1,a=-1;e<r;++e)switch(t[e]){case".":a=n=e;break;case"0":0===a&&(a=e),n=e;break;default:if(!+t[e])break t;a>0&&(a=0)}return a>0?t.slice(0,a)+t.slice(n+1):t}(t)),N&&0==+t&&"+"!==f&&(N=!1),h=(N?"("===f?f:l:"-"===f||"("===f?"":f)+h,k=("s"===M?G[8+O/3]:"")+k+(N&&"("===f?")":""),x)for(a=-1,i=t.length;++a<i;)if(48>(c=t.charCodeAt(a))||c>57){k=(46===c?o+t.slice(a+1):t.slice(a))+k,t=t.slice(0,a);break}}g&&!d&&(t=e(t,1/0));var A=h.length+t.length+k.length,C=A<m?new Array(m-A+1).join(n):"";switch(g&&d&&(t=e(C+t,C.length?m-k.length:1/0),C=""),r){case"<":t=h+t+k+C;break;case"=":t=h+C+t+k;break;case"^":t=C.slice(0,A=C.length>>1)+h+t+k+C.slice(A);break;default:t=C+h+t+k}return u(t)}return p=void 0===p?6:/[gprs]/.test(M)?Math.max(1,Math.min(21,p)):Math.max(0,Math.min(20,p)),k.toString=function(){return t+""},k}return{format:f,formatPrefix:function(t,n){var r=f(((t=B(t)).type="f",t)),e=3*Math.max(-8,Math.min(8,Math.floor(D(n)/3))),a=Math.pow(10,-e),i=G[8+e/3];return function(t){return r(a*t)+i}}}}function Z(){var t,n,r=l().unknown(void 0),e=r.domain,a=r.range,i=[0,1],o=!1,u=0,c=0,f=.5;function h(){var r=e().length,l=i[1]<i[0],s=i[l-0],h=i[1-l];t=(h-s)/Math.max(1,r-u+2*c),o&&(t=Math.floor(t)),s+=(h-s-t*(r-u))*f,n=t*(1-u),o&&(s=Math.round(s),n=Math.round(n));var d=p(r).map((function(n){return s+t*n}));return a(l?d.reverse():d)}return delete r.unknown,r.domain=function(t){return arguments.length?(e(t),h()):e()},r.range=function(t){return arguments.length?(i=[+t[0],+t[1]],h()):i.slice()},r.rangeRound=function(t){return i=[+t[0],+t[1]],o=!0,h()},r.bandwidth=function(){return n},r.step=function(){return t},r.round=function(t){return arguments.length?(o=!!t,h()):o},r.padding=function(t){return arguments.length?(u=Math.min(1,c=+t),h()):u},r.paddingInner=function(t){return arguments.length?(u=Math.min(1,t),h()):u},r.paddingOuter=function(t){return arguments.length?(c=+t,h()):c},r.align=function(t){return arguments.length?(f=Math.max(0,Math.min(1,t)),h()):f},r.copy=function(){return Z(e(),i).round(o).paddingInner(u).paddingOuter(c).align(f)},s.apply(h(),arguments)}function J(t){return+t}T=U({decimal:".",thousands:",",grouping:[3],currency:["$",""],minus:"-"}),R=T.format,W=T.formatPrefix;var K=[0,1];function Q(t){return t}function tt(t,n){return(n-=t=+t)?function(r){return(r-t)/n}:(r=isNaN(n)?NaN:.5,function(){return r});var r}function nt(t){var n,r=t[0],e=t[t.length-1];return r>e&&(n=r,r=e,e=n),function(t){return Math.max(r,Math.min(e,t))}}function rt(t,n,r){var e=t[0],a=t[1],i=n[0],o=n[1];return a<e?(e=tt(a,e),i=r(o,i)):(e=tt(e,a),i=r(i,o)),function(t){return i(e(t))}}function et(t,n,r){var e=Math.min(t.length,n.length)-1,a=new Array(e),i=new Array(e),o=-1;for(t[e]<t[0]&&(t=t.slice().reverse(),n=n.slice().reverse());++o<e;)a[o]=tt(t[o],t[o+1]),i[o]=r(n[o],n[o+1]);return function(n){var r=d(t,n,1,e)-1;return i[r](a[r](n))}}function at(t,n){return n.domain(t.domain()).range(t.range()).interpolate(t.interpolate()).clamp(t.clamp()).unknown(t.unknown())}function it(t,n){return function(){var t,n,r,e,a,o,u=K,c=K,l=I,s=Q;function d(){return e=Math.min(u.length,c.length)>2?et:rt,a=o=null,m}function m(n){return isNaN(n=+n)?r:(a||(a=e(u.map(t),c,l)))(t(s(n)))}return m.invert=function(r){return s(n((o||(o=e(c,u.map(t),i)))(r)))},m.domain=function(t){return arguments.length?(u=f.call(t,J),s===Q||(s=nt(u)),d()):u.slice()},m.range=function(t){return arguments.length?(c=h.call(t),d()):c.slice()},m.rangeRound=function(t){return c=h.call(t),l=L,d()},m.clamp=function(t){return arguments.length?(s=t?nt(u):Q,m):s!==Q},m.interpolate=function(t){return arguments.length?(l=t,d()):l},m.unknown=function(t){return arguments.length?(r=t,m):r},function(r,e){return t=r,n=e,d()}}()(t,n)}function ot(t,n,r,e){var a,i=function(t,n,r){var e=Math.abs(n-t)/Math.max(0,r),a=Math.pow(10,Math.floor(Math.log(e)/Math.LN10)),i=e/a;return i>=v?a*=10:i>=M?a*=5:i>=y&&(a*=2),n<t?-a:a}(t,n,r);switch((e=B(null==e?",f":e)).type){case"s":var o=Math.max(Math.abs(t),Math.abs(n));return null!=e.precision||isNaN(a=function(t,n){return Math.max(0,3*Math.max(-8,Math.min(8,Math.floor(D(n)/3)))-D(Math.abs(t)))}(i,o))||(e.precision=a),W(e,o);case"":case"e":case"g":case"p":case"r":null!=e.precision||isNaN(a=function(t,n){return t=Math.abs(t),n=Math.abs(n)-t,Math.max(0,D(n)-D(t))+1}(i,Math.max(Math.abs(t),Math.abs(n))))||(e.precision=a-("e"===e.type));break;case"f":case"%":null!=e.precision||isNaN(a=function(t){return Math.max(0,-D(Math.abs(t)))}(i))||(e.precision=a-2*("%"===e.type))}return R(e)}function ut(t){var n=t.domain;return t.ticks=function(t){var r=n();return function(t,n,r){var e,a,i,o,u=-1;if(r=+r,(t=+t)==(n=+n)&&r>0)return[t];if((e=n<t)&&(a=t,t=n,n=a),0===(o=b(t,n,r))||!isFinite(o))return[];if(o>0)for(t=Math.ceil(t/o),n=Math.floor(n/o),i=new Array(a=Math.ceil(n-t+1));++u<a;)i[u]=(t+u)*o;else for(t=Math.floor(t*o),n=Math.ceil(n*o),i=new Array(a=Math.ceil(t-n+1));++u<a;)i[u]=(t-u)/o;return e&&i.reverse(),i}(r[0],r[r.length-1],null==t?10:t)},t.tickFormat=function(t,r){var e=n();return ot(e[0],e[e.length-1],null==t?10:t,r)},t.nice=function(r){null==r&&(r=10);var e,a=n(),i=0,o=a.length-1,u=a[i],c=a[o];return c<u&&(e=u,u=c,c=e,e=i,i=o,o=e),(e=b(u,c,r))>0?e=b(u=Math.floor(u/e)*e,c=Math.ceil(c/e)*e,r):e<0&&(e=b(u=Math.ceil(u*e)/e,c=Math.floor(c*e)/e,r)),e>0?(a[i]=Math.floor(u/e)*e,a[o]=Math.ceil(c/e)*e,n(a)):e<0&&(a[i]=Math.ceil(u*e)/e,a[o]=Math.floor(c*e)/e,n(a)),t},t}function ct(){var t=it(Q,Q);return t.copy=function(){return at(t,ct())},s.apply(t,arguments),ut(t)}g("#barChart {\n  width: 100%; }\n");var lt=function(e){var a=e.className,i=e.barChartData,o=e.setSelectedYear,u=e.fontColor,c=e.barColor,l=e.width;if(!i||0===i.length)return null;var s=100,f=30,h=90,d=30,g=window.innerWidth<767?2*window.innerWidth-s-h:700-s-h,v=function(t){var n=0;t.forEach((function(t){parseInt(t.count,10)>n&&(n=parseInt(t.count,10))})),m("div#barChart").html("");var r,e=m("#barChart").append("svg").attr("width",l+d+f).attr("height",g+s+h).append("g").attr("transform","translate(".concat(d,",").concat(s,")")),a=Z().range([0,l]).domain(t.map((function(t){return t.year}))).padding(.2);e.append("g").attr("transform","translate(0,".concat(g,")")).call((r=a,j(3,r))).style("color",u).selectAll("text").attr("transform","translate(-10,0)rotate(-45)").style("text-anchor","end").style("color",u).style("font-size",16);var i=ct().domain([0,n]).range([g,0]);e.selectAll("mybar").data(t).enter().append("rect").attr("x",(function(t){return a(t.year)})).attr("width",a.bandwidth()).attr("fill",c).attr("title",(function(t){return t.count})).attr("height",(function(){return g-i(0)})).attr("y",(function(){return i(0)})).style("cursor","pointer").on("click",(function(t){return o(t.year)})).append("svg:title").text((function(t){return"數量:".concat(t.count)})),e.selectAll("rect").transition().duration(800).attr("y",(function(t){return i(t.count)})).attr("height",(function(t){return g-i(t.count)})).delay((function(t,n){return 10*n})),e.append("g").call(function(t){return j(4,t)}(i).tickValues(p(i.domain()[0],i.domain()[1]+1,1)).tickFormat((function(t){return Math.round(t)}))).attr("id","yaxis").style("color",u).style("font-size",15)};function M(){var t=document.getElementById("barChart__block");0===t.scrollLeft&&document.getElementById("yaxis").setAttribute("transform","translate(0, 0 )"),t.scrollLeft>0&&document.getElementById("yaxis").setAttribute("transform","translate(".concat(t.scrollLeft,", 0)"))}return n((function(){i.length>0&&v(i),document.getElementById("barChart__block").addEventListener("scroll",M)}),[i]),t.createElement("div",{id:"barChart",className:r("barChart",a)})};lt.defaultProps={className:void 0,barChartData:[],setSelectedYear:function(){return null},fontColor:"#000",barColor:"#69b3a2",width:2e3},lt.propTypes={className:e.string,barChartData:e.arrayOf(e.any),setSelectedYear:e.func,fontColor:e.string,barColor:e.string,width:e.number};export{lt as default};
+import React__default, { useEffect } from 'react';
+import { c as classNames } from './index-848f4409.js';
+import PropTypes from 'prop-types';
+import { g as constant$1, h as interpolateNumber, j as color, k as interpolateRgb, l as interpolateString, n as exponent, o as ordinal, p as initRange, r as map, s as slice$1, u as bisectRight, v as formatSpecifier, w as formatPrefix, x as format, d as d3Select } from './transform-3a04288b.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+function sequence(start, stop, step) {
+  start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
+
+  var i = -1,
+      n = Math.max(0, Math.ceil((stop - start) / step)) | 0,
+      range = new Array(n);
+
+  while (++i < n) {
+    range[i] = start + i * step;
+  }
+
+  return range;
+}
+
+var e10 = Math.sqrt(50),
+    e5 = Math.sqrt(10),
+    e2 = Math.sqrt(2);
+
+function ticks(start, stop, count) {
+  var reverse,
+      i = -1,
+      n,
+      ticks,
+      step;
+
+  stop = +stop, start = +start, count = +count;
+  if (start === stop && count > 0) return [start];
+  if (reverse = stop < start) n = start, start = stop, stop = n;
+  if ((step = tickIncrement(start, stop, count)) === 0 || !isFinite(step)) return [];
+
+  if (step > 0) {
+    start = Math.ceil(start / step);
+    stop = Math.floor(stop / step);
+    ticks = new Array(n = Math.ceil(stop - start + 1));
+    while (++i < n) ticks[i] = (start + i) * step;
+  } else {
+    start = Math.floor(start * step);
+    stop = Math.ceil(stop * step);
+    ticks = new Array(n = Math.ceil(start - stop + 1));
+    while (++i < n) ticks[i] = (start - i) / step;
+  }
+
+  if (reverse) ticks.reverse();
+
+  return ticks;
+}
+
+function tickIncrement(start, stop, count) {
+  var step = (stop - start) / Math.max(0, count),
+      power = Math.floor(Math.log(step) / Math.LN10),
+      error = step / Math.pow(10, power);
+  return power >= 0
+      ? (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1) * Math.pow(10, power)
+      : -Math.pow(10, -power) / (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1);
+}
+
+function tickStep(start, stop, count) {
+  var step0 = Math.abs(stop - start) / Math.max(0, count),
+      step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)),
+      error = step0 / step1;
+  if (error >= e10) step1 *= 10;
+  else if (error >= e5) step1 *= 5;
+  else if (error >= e2) step1 *= 2;
+  return stop < start ? -step1 : step1;
+}
+
+var slice = Array.prototype.slice;
+
+function identity$1(x) {
+  return x;
+}
+
+var top = 1,
+    right = 2,
+    bottom = 3,
+    left = 4,
+    epsilon = 1e-6;
+
+function translateX(x) {
+  return "translate(" + (x + 0.5) + ",0)";
+}
+
+function translateY(y) {
+  return "translate(0," + (y + 0.5) + ")";
+}
+
+function number$1(scale) {
+  return function(d) {
+    return +scale(d);
+  };
+}
+
+function center(scale) {
+  var offset = Math.max(0, scale.bandwidth() - 1) / 2; // Adjust for 0.5px offset.
+  if (scale.round()) offset = Math.round(offset);
+  return function(d) {
+    return +scale(d) + offset;
+  };
+}
+
+function entering() {
+  return !this.__axis;
+}
+
+function axis(orient, scale) {
+  var tickArguments = [],
+      tickValues = null,
+      tickFormat = null,
+      tickSizeInner = 6,
+      tickSizeOuter = 6,
+      tickPadding = 3,
+      k = orient === top || orient === left ? -1 : 1,
+      x = orient === left || orient === right ? "x" : "y",
+      transform = orient === top || orient === bottom ? translateX : translateY;
+
+  function axis(context) {
+    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
+        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity$1) : tickFormat,
+        spacing = Math.max(tickSizeInner, 0) + tickPadding,
+        range = scale.range(),
+        range0 = +range[0] + 0.5,
+        range1 = +range[range.length - 1] + 0.5,
+        position = (scale.bandwidth ? center : number$1)(scale.copy()),
+        selection = context.selection ? context.selection() : context,
+        path = selection.selectAll(".domain").data([null]),
+        tick = selection.selectAll(".tick").data(values, scale).order(),
+        tickExit = tick.exit(),
+        tickEnter = tick.enter().append("g").attr("class", "tick"),
+        line = tick.select("line"),
+        text = tick.select("text");
+
+    path = path.merge(path.enter().insert("path", ".tick")
+        .attr("class", "domain")
+        .attr("stroke", "currentColor"));
+
+    tick = tick.merge(tickEnter);
+
+    line = line.merge(tickEnter.append("line")
+        .attr("stroke", "currentColor")
+        .attr(x + "2", k * tickSizeInner));
+
+    text = text.merge(tickEnter.append("text")
+        .attr("fill", "currentColor")
+        .attr(x, k * spacing)
+        .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
+
+    if (context !== selection) {
+      path = path.transition(context);
+      tick = tick.transition(context);
+      line = line.transition(context);
+      text = text.transition(context);
+
+      tickExit = tickExit.transition(context)
+          .attr("opacity", epsilon)
+          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d) : this.getAttribute("transform"); });
+
+      tickEnter
+          .attr("opacity", epsilon)
+          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform(p && isFinite(p = p(d)) ? p : position(d)); });
+    }
+
+    tickExit.remove();
+
+    path
+        .attr("d", orient === left || orient == right
+            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H0.5V" + range1 + "H" + k * tickSizeOuter : "M0.5," + range0 + "V" + range1)
+            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V0.5H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + ",0.5H" + range1));
+
+    tick
+        .attr("opacity", 1)
+        .attr("transform", function(d) { return transform(position(d)); });
+
+    line
+        .attr(x + "2", k * tickSizeInner);
+
+    text
+        .attr(x, k * spacing)
+        .text(format);
+
+    selection.filter(entering)
+        .attr("fill", "none")
+        .attr("font-size", 10)
+        .attr("font-family", "sans-serif")
+        .attr("text-anchor", orient === right ? "start" : orient === left ? "end" : "middle");
+
+    selection
+        .each(function() { this.__axis = position; });
+  }
+
+  axis.scale = function(_) {
+    return arguments.length ? (scale = _, axis) : scale;
+  };
+
+  axis.ticks = function() {
+    return tickArguments = slice.call(arguments), axis;
+  };
+
+  axis.tickArguments = function(_) {
+    return arguments.length ? (tickArguments = _ == null ? [] : slice.call(_), axis) : tickArguments.slice();
+  };
+
+  axis.tickValues = function(_) {
+    return arguments.length ? (tickValues = _ == null ? null : slice.call(_), axis) : tickValues && tickValues.slice();
+  };
+
+  axis.tickFormat = function(_) {
+    return arguments.length ? (tickFormat = _, axis) : tickFormat;
+  };
+
+  axis.tickSize = function(_) {
+    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
+  };
+
+  axis.tickSizeInner = function(_) {
+    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
+  };
+
+  axis.tickSizeOuter = function(_) {
+    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
+  };
+
+  axis.tickPadding = function(_) {
+    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
+  };
+
+  return axis;
+}
+
+function axisBottom(scale) {
+  return axis(bottom, scale);
+}
+
+function axisLeft(scale) {
+  return axis(left, scale);
+}
+
+function numberArray(a, b) {
+  if (!b) b = [];
+  var n = a ? Math.min(b.length, a.length) : 0,
+      c = b.slice(),
+      i;
+  return function(t) {
+    for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
+    return c;
+  };
+}
+
+function isNumberArray(x) {
+  return ArrayBuffer.isView(x) && !(x instanceof DataView);
+}
+
+function genericArray(a, b) {
+  var nb = b ? b.length : 0,
+      na = a ? Math.min(nb, a.length) : 0,
+      x = new Array(na),
+      c = new Array(nb),
+      i;
+
+  for (i = 0; i < na; ++i) x[i] = interpolateValue(a[i], b[i]);
+  for (; i < nb; ++i) c[i] = b[i];
+
+  return function(t) {
+    for (i = 0; i < na; ++i) c[i] = x[i](t);
+    return c;
+  };
+}
+
+function date(a, b) {
+  var d = new Date;
+  return a = +a, b = +b, function(t) {
+    return d.setTime(a * (1 - t) + b * t), d;
+  };
+}
+
+function object(a, b) {
+  var i = {},
+      c = {},
+      k;
+
+  if (a === null || typeof a !== "object") a = {};
+  if (b === null || typeof b !== "object") b = {};
+
+  for (k in b) {
+    if (k in a) {
+      i[k] = interpolateValue(a[k], b[k]);
+    } else {
+      c[k] = b[k];
+    }
+  }
+
+  return function(t) {
+    for (k in i) c[k] = i[k](t);
+    return c;
+  };
+}
+
+function interpolateValue(a, b) {
+  var t = typeof b, c;
+  return b == null || t === "boolean" ? constant$1(b)
+      : (t === "number" ? interpolateNumber
+      : t === "string" ? ((c = color(b)) ? (b = c, interpolateRgb) : interpolateString)
+      : b instanceof color ? interpolateRgb
+      : b instanceof Date ? date
+      : isNumberArray(b) ? numberArray
+      : Array.isArray(b) ? genericArray
+      : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object
+      : interpolateNumber)(a, b);
+}
+
+function interpolateRound(a, b) {
+  return a = +a, b = +b, function(t) {
+    return Math.round(a * (1 - t) + b * t);
+  };
+}
+
+function precisionFixed(step) {
+  return Math.max(0, -exponent(Math.abs(step)));
+}
+
+function precisionPrefix(step, value) {
+  return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step)));
+}
+
+function precisionRound(step, max) {
+  step = Math.abs(step), max = Math.abs(max) - step;
+  return Math.max(0, exponent(max) - exponent(step)) + 1;
+}
+
+function band() {
+  var scale = ordinal().unknown(undefined),
+      domain = scale.domain,
+      ordinalRange = scale.range,
+      range = [0, 1],
+      step,
+      bandwidth,
+      round = false,
+      paddingInner = 0,
+      paddingOuter = 0,
+      align = 0.5;
+
+  delete scale.unknown;
+
+  function rescale() {
+    var n = domain().length,
+        reverse = range[1] < range[0],
+        start = range[reverse - 0],
+        stop = range[1 - reverse];
+    step = (stop - start) / Math.max(1, n - paddingInner + paddingOuter * 2);
+    if (round) step = Math.floor(step);
+    start += (stop - start - step * (n - paddingInner)) * align;
+    bandwidth = step * (1 - paddingInner);
+    if (round) start = Math.round(start), bandwidth = Math.round(bandwidth);
+    var values = sequence(n).map(function(i) { return start + step * i; });
+    return ordinalRange(reverse ? values.reverse() : values);
+  }
+
+  scale.domain = function(_) {
+    return arguments.length ? (domain(_), rescale()) : domain();
+  };
+
+  scale.range = function(_) {
+    return arguments.length ? (range = [+_[0], +_[1]], rescale()) : range.slice();
+  };
+
+  scale.rangeRound = function(_) {
+    return range = [+_[0], +_[1]], round = true, rescale();
+  };
+
+  scale.bandwidth = function() {
+    return bandwidth;
+  };
+
+  scale.step = function() {
+    return step;
+  };
+
+  scale.round = function(_) {
+    return arguments.length ? (round = !!_, rescale()) : round;
+  };
+
+  scale.padding = function(_) {
+    return arguments.length ? (paddingInner = Math.min(1, paddingOuter = +_), rescale()) : paddingInner;
+  };
+
+  scale.paddingInner = function(_) {
+    return arguments.length ? (paddingInner = Math.min(1, _), rescale()) : paddingInner;
+  };
+
+  scale.paddingOuter = function(_) {
+    return arguments.length ? (paddingOuter = +_, rescale()) : paddingOuter;
+  };
+
+  scale.align = function(_) {
+    return arguments.length ? (align = Math.max(0, Math.min(1, _)), rescale()) : align;
+  };
+
+  scale.copy = function() {
+    return band(domain(), range)
+        .round(round)
+        .paddingInner(paddingInner)
+        .paddingOuter(paddingOuter)
+        .align(align);
+  };
+
+  return initRange.apply(rescale(), arguments);
+}
+
+function constant(x) {
+  return function() {
+    return x;
+  };
+}
+
+function number(x) {
+  return +x;
+}
+
+var unit = [0, 1];
+
+function identity(x) {
+  return x;
+}
+
+function normalize(a, b) {
+  return (b -= (a = +a))
+      ? function(x) { return (x - a) / b; }
+      : constant(isNaN(b) ? NaN : 0.5);
+}
+
+function clamper(domain) {
+  var a = domain[0], b = domain[domain.length - 1], t;
+  if (a > b) t = a, a = b, b = t;
+  return function(x) { return Math.max(a, Math.min(b, x)); };
+}
+
+// normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
+// interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
+function bimap(domain, range, interpolate) {
+  var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
+  if (d1 < d0) d0 = normalize(d1, d0), r0 = interpolate(r1, r0);
+  else d0 = normalize(d0, d1), r0 = interpolate(r0, r1);
+  return function(x) { return r0(d0(x)); };
+}
+
+function polymap(domain, range, interpolate) {
+  var j = Math.min(domain.length, range.length) - 1,
+      d = new Array(j),
+      r = new Array(j),
+      i = -1;
+
+  // Reverse descending domains.
+  if (domain[j] < domain[0]) {
+    domain = domain.slice().reverse();
+    range = range.slice().reverse();
+  }
+
+  while (++i < j) {
+    d[i] = normalize(domain[i], domain[i + 1]);
+    r[i] = interpolate(range[i], range[i + 1]);
+  }
+
+  return function(x) {
+    var i = bisectRight(domain, x, 1, j) - 1;
+    return r[i](d[i](x));
+  };
+}
+
+function copy(source, target) {
+  return target
+      .domain(source.domain())
+      .range(source.range())
+      .interpolate(source.interpolate())
+      .clamp(source.clamp())
+      .unknown(source.unknown());
+}
+
+function transformer() {
+  var domain = unit,
+      range = unit,
+      interpolate = interpolateValue,
+      transform,
+      untransform,
+      unknown,
+      clamp = identity,
+      piecewise,
+      output,
+      input;
+
+  function rescale() {
+    piecewise = Math.min(domain.length, range.length) > 2 ? polymap : bimap;
+    output = input = null;
+    return scale;
+  }
+
+  function scale(x) {
+    return isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate)))(transform(clamp(x)));
+  }
+
+  scale.invert = function(y) {
+    return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber)))(y)));
+  };
+
+  scale.domain = function(_) {
+    return arguments.length ? (domain = map.call(_, number), clamp === identity || (clamp = clamper(domain)), rescale()) : domain.slice();
+  };
+
+  scale.range = function(_) {
+    return arguments.length ? (range = slice$1.call(_), rescale()) : range.slice();
+  };
+
+  scale.rangeRound = function(_) {
+    return range = slice$1.call(_), interpolate = interpolateRound, rescale();
+  };
+
+  scale.clamp = function(_) {
+    return arguments.length ? (clamp = _ ? clamper(domain) : identity, scale) : clamp !== identity;
+  };
+
+  scale.interpolate = function(_) {
+    return arguments.length ? (interpolate = _, rescale()) : interpolate;
+  };
+
+  scale.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale) : unknown;
+  };
+
+  return function(t, u) {
+    transform = t, untransform = u;
+    return rescale();
+  };
+}
+
+function continuous(transform, untransform) {
+  return transformer()(transform, untransform);
+}
+
+function tickFormat(start, stop, count, specifier) {
+  var step = tickStep(start, stop, count),
+      precision;
+  specifier = formatSpecifier(specifier == null ? ",f" : specifier);
+  switch (specifier.type) {
+    case "s": {
+      var value = Math.max(Math.abs(start), Math.abs(stop));
+      if (specifier.precision == null && !isNaN(precision = precisionPrefix(step, value))) specifier.precision = precision;
+      return formatPrefix(specifier, value);
+    }
+    case "":
+    case "e":
+    case "g":
+    case "p":
+    case "r": {
+      if (specifier.precision == null && !isNaN(precision = precisionRound(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
+      break;
+    }
+    case "f":
+    case "%": {
+      if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2;
+      break;
+    }
+  }
+  return format(specifier);
+}
+
+function linearish(scale) {
+  var domain = scale.domain;
+
+  scale.ticks = function(count) {
+    var d = domain();
+    return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
+  };
+
+  scale.tickFormat = function(count, specifier) {
+    var d = domain();
+    return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
+  };
+
+  scale.nice = function(count) {
+    if (count == null) count = 10;
+
+    var d = domain(),
+        i0 = 0,
+        i1 = d.length - 1,
+        start = d[i0],
+        stop = d[i1],
+        step;
+
+    if (stop < start) {
+      step = start, start = stop, stop = step;
+      step = i0, i0 = i1, i1 = step;
+    }
+
+    step = tickIncrement(start, stop, count);
+
+    if (step > 0) {
+      start = Math.floor(start / step) * step;
+      stop = Math.ceil(stop / step) * step;
+      step = tickIncrement(start, stop, count);
+    } else if (step < 0) {
+      start = Math.ceil(start * step) / step;
+      stop = Math.floor(stop * step) / step;
+      step = tickIncrement(start, stop, count);
+    }
+
+    if (step > 0) {
+      d[i0] = Math.floor(start / step) * step;
+      d[i1] = Math.ceil(stop / step) * step;
+      domain(d);
+    } else if (step < 0) {
+      d[i0] = Math.ceil(start * step) / step;
+      d[i1] = Math.floor(stop * step) / step;
+      domain(d);
+    }
+
+    return scale;
+  };
+
+  return scale;
+}
+
+function linear() {
+  var scale = continuous(identity, identity);
+
+  scale.copy = function() {
+    return copy(scale, linear());
+  };
+
+  initRange.apply(scale, arguments);
+
+  return linearish(scale);
+}
+
+var css_248z = "#barChart {\n  width: 100%; }\n";
+styleInject(css_248z);
+
+var BarChart = function BarChart(_ref) {
+  var className = _ref.className,
+    barChartData = _ref.barChartData,
+    setSelectedYear = _ref.setSelectedYear,
+    fontColor = _ref.fontColor,
+    barColor = _ref.barColor,
+    width = _ref.width,
+    scaleTicks = _ref.scaleTicks;
+  if (!barChartData || barChartData.length === 0) {
+    return null;
+  }
+  // set the dimensions and margins of the graph
+  var margin = {
+    top: 100,
+    right: 30,
+    bottom: 90,
+    left: 35
+  };
+  var height = window.innerWidth < 767 ? window.innerWidth * 2 - margin.top - margin.bottom : 700 - margin.top - margin.bottom;
+
+  // Parse the Data
+  var readData = function readData(data) {
+    var maxValue = 0;
+    data.forEach(function (item) {
+      if (parseInt(item.count, 10) > maxValue) {
+        maxValue = parseInt(item.count, 10);
+      }
+    });
+    d3Select('div#barChart').html('');
+    var svg = d3Select('#barChart').append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', "translate(".concat(margin.left, ",").concat(margin.top, ")"));
+    // X axis
+    var x = band().range([0, width]).domain(data.map(function (d) {
+      return d.year;
+    })).padding(0.2);
+    svg.append('g').attr('id', 'xaxis').attr('transform', "translate(0,".concat(height, ")")).call(axisBottom(x)).style('color', fontColor).selectAll('text').attr('transform', 'translate(-10,0)rotate(-45)').style('text-anchor', 'end').style('color', fontColor).style('font-size', 16).style('cursor', 'pointer').on('click', function (d) {
+      setSelectedYear(d);
+    });
+
+    // Add Y axis
+    var y = linear().domain([0, maxValue]).range([height, 0]);
+
+    // Bars
+    svg.selectAll('mybar').data(data).enter().append('rect').attr('x', function (d) {
+      return x(d.year);
+    }).attr('width', x.bandwidth()).attr('fill', barColor).attr('title', function (d) {
+      return d.count;
+    })
+    // no bar at the beginning thus:
+    .attr('height', function () {
+      return height - y(0);
+    }) // always equal to 0
+    .attr('y', function () {
+      return y(0);
+    }).style('cursor', 'pointer').on('click', function (d) {
+      return setSelectedYear(d.year);
+    }).append('svg:title').text(function (d) {
+      return "\u6578\u91CF:".concat(d.count);
+    });
+
+    // Animation
+    svg.selectAll('rect').transition().duration(800).attr('y', function (d) {
+      return y(d.count);
+    }).attr('height', function (d) {
+      return height - y(d.count);
+    }).delay(function (d, i) {
+      return i * 10;
+    });
+    svg.append('g').call(axisLeft(y).tickValues(sequence(y.domain()[0], y.domain()[1] + 1, scaleTicks)).tickFormat(function (d) {
+      return Math.round(d);
+    })).attr('id', 'yaxis').style('color', fontColor).style('font-size', 15);
+  };
+  function shiftYaxis() {
+    var element = document.getElementById('barChart__block');
+    if (element.scrollLeft === 0) {
+      document.getElementById('yaxis').setAttribute('transform', 'translate(0, 0 )');
+    }
+    if (element.scrollLeft > 0) {
+      document.getElementById('yaxis').setAttribute('transform', "translate(".concat(element.scrollLeft, ", 0)"));
+    }
+  }
+  useEffect(function () {
+    if (barChartData.length > 0) {
+      readData(barChartData);
+    }
+    document.getElementById('barChart__block').addEventListener('scroll', shiftYaxis);
+  }, [barChartData]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "barChart",
+    className: classNames('barChart', className)
+  });
+};
+BarChart.defaultProps = {
+  className: undefined,
+  barChartData: [],
+  setSelectedYear: function setSelectedYear() {
+    return null;
+  },
+  fontColor: '#000',
+  barColor: '#69b3a2',
+  width: 2000,
+  scaleTicks: 1
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+BarChart.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 資料來源 */
+  barChartData: PropTypes.arrayOf(PropTypes.any),
+  /** 設定點選年分 */
+  setSelectedYear: PropTypes.func,
+  /** X、Y尺度字的顏色 */
+  fontColor: PropTypes.string,
+  /** 長條圖的顏色 */
+  barColor: PropTypes.string,
+  /** 圖表的寬度，影響bar的粗度 */
+  width: PropTypes.number,
+  /** 刻度的級距，以一個刻度相差多少 */
+  scaleTicks: PropTypes.number
+};
+
+export { BarChart as default };