Shoka主题：美化统计页面并新增多维图表

const cheerio = require('cheerio')

const moment = require('moment')

const chartURL = path => require('hexo-util').url_for.call({ config: hexo.config }, path, { relative: false })

const chartJson = value => JSON.stringify(value).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')

hexo.extend.filter.register('after_render:html', function (locals) {

  const $ = cheerio.load(locals)

  const calendar = $('#posts-calendar')

  const post = $('#posts-chart')

  const tag = $('#tags-chart')

  const category = $('#categories-chart')

  const creationClock = $('#creation-clock-chart')

  const articleSize = $('#article-size-chart')

  const categoryTagSunburst = $('#category-tag-sunburst')

  const pageview = $('#pageview-chart')

  let htmlEncode = false

  if (calendar.length > 0 || post.length > 0 || tag.length > 0 || category.length > 0 || creationClock.length > 0 || articleSize.length > 0 || categoryTagSunburst.length > 0 || pageview.length > 0) {

    if ($('#statisticsPinnedDetailStyle').length === 0) {

      $('#posts-calendar, #posts-chart, #tags-chart, #categories-chart, #creation-clock-chart, #article-size-chart, #category-tag-sunburst, #pageview-chart').first().before(`<style id="statisticsPinnedDetailStyle">

        .statistics-detail-tip { color:var(--text-color); font-size:13px; line-height:1.8; opacity:.8; }

        .statistics-pinned-detail { position:relative; margin:0 16px 16px; padding:16px 72px 16px 18px; border:1px solid #d8c4ed; border-radius:14px; background:#f5effb; color:#493757; font-size:13px; line-height:1.85; overflow-wrap:anywhere; }

        .statistics-pinned-detail__title { display:block; margin-bottom:6px; font-size:15px; font-weight:650; color:#654382; }

        .statistics-pinned-detail p { margin:3px 0; line-height:1.85; }

        .statistics-pinned-detail__close { position:absolute; right:10px; top:10px; min-width:44px; min-height:44px; padding:6px 9px; border:1px solid #d8c4ed; border-radius:9px; background:#eee3f8; color:#654382; font:inherit; cursor:pointer; }

        .statistics-pinned-detail__link { display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; margin-top:10px; margin-right:8px; padding:6px 14px; border:1px solid #c6a7e3; border-radius:9px; background:#e9dcf7; color:#583879; font-weight:600; text-decoration:none; }

        .statistics-pinned-detail__close:focus-visible,.statistics-pinned-detail__link:focus-visible { outline:3px solid #a76dd9; outline-offset:3px; }

        [data-theme='dark'] .statistics-pinned-detail { border-color:#645075; background:#342d40; color:#e5dcef; }

        [data-theme='dark'] .statistics-pinned-detail__title { color:#dfc4f5; }

        [data-theme='dark'] .statistics-pinned-detail__close,[data-theme='dark'] .statistics-pinned-detail__link { border-color:#79608f; background:#4a395c; color:#ead6fc; }

        html[data-palette='custom'] .statistics-pinned-detail { border-color:var(--color-red-a3); background:var(--palette-primary-surface); color:var(--text-color); }

        html[data-palette='custom'] .statistics-pinned-detail__title { color:var(--primary-color); }

        html[data-palette='custom'] .statistics-pinned-detail__close,html[data-palette='custom'] .statistics-pinned-detail__link { border-color:var(--color-red-a3); background:var(--color-red-a1); color:var(--primary-color); }

        html[data-palette='custom'] .statistics-pinned-detail__close:focus-visible,html[data-palette='custom'] .statistics-pinned-detail__link:focus-visible { outline-color:var(--primary-color); }

        @media(max-width:767px) { .statistics-pinned-detail { margin:0 10px 12px; padding:14px 64px 14px 14px; font-size:13px; } }

      </style>`)

    }

    if (calendar.length > 0 && $('#postsCalendar').length === 0) {

      if (calendar.attr('data-encode') === 'true') htmlEncode = true

      calendar.after(postsCalendar())

    }

    if (post.length > 0 && $('#postsChart').length === 0) {

      if (post.attr('data-encode') === 'true') htmlEncode = true

      post.after(postsChart())

    }

    if (tag.length > 0 && $('#tagsChart').length === 0) {

      if (tag.attr('data-encode') === 'true') htmlEncode = true

      tag.after(tagsChart(tag.attr('data-length')))

    }

    if (category.length > 0 && $('#categoriesChart').length === 0) {

      if (category.attr('data-encode') === 'true') htmlEncode = true

      category.after(categoriesChart())

    }

    if (creationClock.length > 0 && $('#creationClockChart').length === 0) {

      if (creationClock.attr('data-encode') === 'true') htmlEncode = true

      creationClock.after(creationClockChart())

    }

    if (articleSize.length > 0 && $('#articleSizeChart').length === 0) {

      if (articleSize.attr('data-encode') === 'true') htmlEncode = true

      articleSize.after(articleSizeChart())

    }

    if (categoryTagSunburst.length > 0 && $('#categoryTagSunburstChart').length === 0) {

      if (categoryTagSunburst.attr('data-encode') === 'true') htmlEncode = true

      categoryTagSunburst.after(categoryTagSunburstChart())

    }

    if (pageview.length > 0 && $('#pageviewChart').length === 0) {

      if (pageview.attr('data-encode') === 'true') htmlEncode = true

    }

  } else {

    return locals

  }

}, 15)

function postsCalendar () {

  const dateMap = new Map()

  const yearMap = new Map()

  hexo.locals.get('posts').forEach(function (post) {

    const postDate = moment(post.date).startOf('day')

    const date = postDate.format('YYYY-MM-DD')

    const year = postDate.year()

    dateMap.set(date, (dateMap.get(date) || 0) + 1)

    yearMap.set(year, (yearMap.get(year) || 0) + 1)

  })

  const availableYears = Array.from(yearMap.keys()).sort(function (a, b) {

    return b - a

  })

  if (availableYears.length === 0) {

      postsCalendar.resize()

      renderPostsCalendar(postsCalendarSelectedYear)

    }, function (event) {

      var value = event.value || []

      return { title: value[0], lines: [value[1] + ' 篇文章', Number(value[1]) === 0 ? '当天没有文章发布记录。' : '按文章发布日期统计。'] }

    })

    </script>`

}

function postsChart () {

  const posts = hexo.locals.get('posts')

  let startDate = moment().startOf('month')

  const endDate = moment()

  posts.forEach(function (post) {

    const postDate = moment(post.date).startOf('month')

    if (postDate.isBefore(startDate)) startDate = postDate

  })

  const monthMap = new Map()

  for (let cursor = startDate.clone(); !cursor.isAfter(endDate, 'month'); cursor.add(1, 'month')) {

    monthMap.set(cursor.format('YYYY-MM'), 0)

  }

  posts.forEach(function (post) {

    window.ShokaStatisticsCharts.register(postsChart, function () {

      postsChart.resize()

    }, function (event) {

      return { title: event.name, lines: [event.value + ' 篇文章', Number(event.value) === 0 ? '该月没有文章发布记录。' : '按文章发布月份统计。'] }

    })

    </script>`

}

function tagsChart (len) {

  const tagArr = []

  hexo.locals.get('tags').map(function (tag) {

    tagArr.push({ name: tag.name, value: tag.length, path: chartURL(tag.path) })

  })

  tagArr.sort((a, b) => { return b.value - a.value })

  let dataLength = Math.min(tagArr.length, len) || tagArr.length

  const tagNameArr = []

  const tagCountArr = []

  for (let i = 0; i < dataLength; i++) {

    tagNameArr.push(tagArr[i].name)

    tagCountArr.push({ value: tagArr[i].value, path: tagArr[i].path })

  }

    window.ShokaStatisticsCharts.register(tagsChart, function () {

      tagsChart.resize()

    }, function (event) {

      return { title: event.name, lines: [event.value + ' 篇文章'], links: [{ href: event.data && event.data.path, label: '查看该标签文章' }] }

    })

    </script>`

}

function categoriesChart () {

  const categoryArr = []

  hexo.locals.get('categories').map(function (category) {

    categoryArr.push({ name: category.name, value: category.length, path: chartURL(category.path) })

  })

  categoryArr.sort((a, b) => { return b.value - a.value });

  const categoryArrJson = chartJson(categoryArr)

  const categoryTotal = categoryArr.reduce((total, category) => total + category.value, 0)

  return `

  <script type="text/x-shoka-statistics" id="categoriesChart">

    var categoriesChart = echarts.init(document.getElementById('categories-chart'), 'light')

    if (window.ShokaStatisticsCharts.bindMotion) window.ShokaStatisticsCharts.bindMotion(categoriesChart)

    var categoriesChartRoot = document.documentElement

    var categoriesChartDark = categoriesChartRoot.hasAttribute('data-theme')

    window.ShokaStatisticsCharts.register(categoriesChart, function () {

      categoriesChart.resize()

    }, function (event) {

      return { title: event.name, lines: [event.value + ' 篇文章', event.percent == null ? '' : '分类占比 ' + event.percent + '%'], links: [{ href: event.data && event.data.path, label: '查看该分类文章' }] }

    })

    </script>`

}

function creationClockChart () {

  const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

  const hourLabels = Array.from({ length: 24 }, function (_, hour) {

    return String(hour).padStart(2, '0') + ':00'

  })

  const hourStats = Array.from({ length: 24 }, function () {

    return { total: 0, weekdays: [0, 0, 0, 0, 0, 0, 0] }

  })

  hexo.locals.get('posts').forEach(function (post) {

    const postDate = moment(post.date)

    const weekday = (postDate.day() + 6) % 7

    const hour = postDate.hour()

    hourStats[hour].total += 1

    window.ShokaStatisticsCharts.register(creationClockChart, function () {

      creationClockChart.resize()

    }, function (event) {

      var weekdays = ${chartJson(weekdays)}

      var lines = [event.value + ' 篇文章']

      ;((event.data && event.data.breakdown) || []).forEach(function (count, index) { lines.push(weekdays[index] + '：' + count + ' 篇') })

      if (Number(event.value) === 0) lines.push('该时段暂无发布记录。')

      return { title: event.name, lines: lines }

    })

    </script>`

}

function articleSizeChart () {

  const palette = ['#ab66ff', '#668cf2', '#54b8d7', '#55c4a8', '#e7a85f', '#e476ad', '#9279dc', '#6d9ccf']

  const categoryColorMap = new Map()

  const scatterData = []

  function getCollectionNames (collection) {

    const names = []

    if (!collection || typeof collection.forEach !== 'function') return names

    collection.forEach(function (item) {

      if (item && item.name) names.push(String(item.name))

    })

    return names

  }

  hexo.locals.get('posts').sort('date').forEach(function (post) {

  const scatterCategories = Array.from(categoryColorMap, function (entry) {

    return { name: entry[0], color: entry[1] }

  })

  return `

  <script type="text/x-shoka-statistics" id="articleSizeChart">

    var articleSizeChart = echarts.init(document.getElementById('article-size-chart'), 'light')

    if (window.ShokaStatisticsCharts.bindMotion) window.ShokaStatisticsCharts.bindMotion(articleSizeChart)

    var articleSizeRoot = document.documentElement

    var articleSizeDark = articleSizeRoot.hasAttribute('data-theme')

    var articleSizeTextColor = window.getComputedStyle(document.body).color || (articleSizeDark ? '#f5f5f5' : '#333')

    var articleSizeAxisColor = window.getComputedStyle(articleSizeRoot).getPropertyValue('--grey-4').trim() || articleSizeTextColor

    var articleSizeSplitColor = articleSizeDark ? 'rgba(255,255,255,.08)' : 'rgba(81,72,99,.09)'

    var articleSizeData = ${chartJson(scatterData)}

    var articleSizeCategories = ${chartJson(scatterCategories)}

    var articleSizeSelectedCategories = null

    var articleSizeYAxisFrame = null

    var articleSizeTimeValues = articleSizeData.map(function (item) {

      return new Date(item.value[0]).getTime()

    }).filter(function (value) {

      return Number.isFinite(value)

    })

    var articleSizeTimeMin = articleSizeTimeValues.length ? Math.min.apply(null, articleSizeTimeValues) : 0

    var articleSizeTimeMax = articleSizeTimeValues.length ? Math.max.apply(null, articleSizeTimeValues) : articleSizeTimeMin

    var articleSizeTimePadding = Math.max(24 * 60 * 60 * 1000, (articleSizeTimeMax - articleSizeTimeMin) * 0.018)

    function articleSizeNiceAxisMax (value) {

      var maximum = Math.max(0, Number(value) || 0)

      if (!maximum) return 100

      var padded = maximum * 1.12

      var magnitude = Math.pow(10, Math.floor(Math.log(padded) / Math.LN10))

      var normalized = padded / magnitude

      var steps = [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]

      var step = steps[steps.length - 1]

      for (var index = 0; index < steps.length; index++) {

        if (normalized <= steps[index]) {

          step = steps[index]

          break

        }

      }

      return Math.ceil(step * magnitude)

    }

    function articleSizeZoomTime (value, fallbackPercent) {

      if (value !== undefined && value !== null && value !== '') {

        var timestamp = typeof value === 'number' ? value : new Date(value).getTime()

        if (Number.isFinite(timestamp)) return timestamp

      }

      var extent = articleSizeTimeMax - articleSizeTimeMin

      return articleSizeTimeMin + extent * fallbackPercent / 100

    }

    function articleSizeVisibleAxisMax () {

      var zoom = (articleSizeChart.getOption().dataZoom || [])[0] || {}

      var startPercent = Number.isFinite(Number(zoom.start)) ? Number(zoom.start) : 0

      var endPercent = Number.isFinite(Number(zoom.end)) ? Number(zoom.end) : 100

      var startTime = articleSizeZoomTime(zoom.startValue, startPercent)

      var endTime = articleSizeZoomTime(zoom.endValue, endPercent)

      var lower = Math.min(startTime, endTime)

      var upper = Math.max(startTime, endTime)

      var visibleMaximum = 0

      articleSizeData.forEach(function (item) {

        var timestamp = new Date(item.value[0]).getTime()

        var category = item.value[3]

        if (!Number.isFinite(timestamp) || timestamp < lower || timestamp > upper) return

        if (articleSizeSelectedCategories && articleSizeSelectedCategories[category] === false) return

        visibleMaximum = Math.max(visibleMaximum, Number(item.value[1]) || 0)

      })

      return articleSizeNiceAxisMax(visibleMaximum)

    }

    function updateArticleSizeYAxis () {

      articleSizeYAxisFrame = null

      if (!articleSizeChart || articleSizeChart.isDisposed()) return

      var nextMaximum = articleSizeVisibleAxisMax()

      var currentAxis = (articleSizeChart.getOption().yAxis || [])[0] || {}

      if (Number(currentAxis.max) === nextMaximum) return

      xAxis: {

        type: 'time',

        min: articleSizeTimeMin - articleSizeTimePadding,

        max: articleSizeTimeMax + articleSizeTimePadding,

        axisTick: { show: false },

        axisLine: { lineStyle: { color: articleSizeAxisColor } },

        axisLabel: { color: articleSizeTextColor, margin: 12 },

        splitLine: { show: false }

      },

      yAxis: {

        type: 'value',

        name: '文章字数',

        nameGap: 16,

        nameTextStyle: { color: articleSizeTextColor, fontSize: 10 },

        axisTick: { show: false },

        axisLine: { show: false },

        axisLabel: {

          color: articleSizeTextColor,

          formatter: function (value) {

            return value >= 1000 ? (value / 1000).toFixed(value >= 10000 ? 0 : 1) + 'k' : value

          }

        },

        splitLine: { show: true, lineStyle: { color: articleSizeSplitColor, type: 'dashed' } }

      },

      dataZoom: [{

        type: 'inside',

        xAxisIndex: 0,

        filterMode: 'none'

      }, {

        type: 'slider',

        xAxisIndex: 0,

        filterMode: 'none',

                var title = params.value[2]

                return title.length > 13 ? title.slice(0, 13) + '…' : title

              }

            },

            itemStyle: { opacity: 1, shadowBlur: 16 }

          }

        }

      })

    }

    articleSizeChart.setOption(articleSizeOption)

    updateArticleSizeYAxis()

    articleSizeChart.on('datazoom', scheduleArticleSizeYAxisUpdate)

    articleSizeChart.on('legendselectchanged', function (event) {

      articleSizeSelectedCategories = event.selected || null

    window.ShokaStatisticsCharts.register(articleSizeChart, function () {

      articleSizeChart.resize()

      scheduleArticleSizeYAxisUpdate()

    }, function (event) {

      var value = event.value || []

      return { title: value[2], lines: ['发布于 ' + value[0] + ' · ' + value[3], '文章体量：' + Number(value[1]).toLocaleString() + ' 字'], links: [{ href: value[4] ? '/' + value[4] : '', label: '阅读全文' }] }

    })

    </script>`

}

function categoryTagSunburstChart () {

  const relationMap = new Map()

  const tagPaths = new Map(), categoryPaths = new Map()

  hexo.locals.get('tags').forEach(tag => tagPaths.set(String(tag.name), chartURL(tag.path)))

  hexo.locals.get('categories').forEach(category => categoryPaths.set(String(category.name), chartURL(category.path)))

  function getCollectionNames (collection) {

    const names = []

    if (!collection || typeof collection.forEach !== 'function') return names

    collection.forEach(function (item) {

      if (item && item.name) names.push(String(item.name))

    })

    return names

var statisticsLoadId = 0

const destroyStatisticsCharts = function () {

  statisticsLoadId++

  if(statisticsAssetLoad) {

    if(typeof statisticsAssetLoad.cancel === 'function') statisticsAssetLoad.cancel()

    statisticsAssetLoad.clearNotices()

    statisticsAssetLoad = null

  }

  var manager = window.ShokaStatisticsCharts

  if(manager && typeof manager.destroy === 'function')

    manager.destroy()

  if(statisticsMountedScripts) {

    statisticsMountedScripts.forEach(function(script) { delete script.dataset.executed })

    statisticsMountedScripts = null

  }

  if(window.statisticsThemeObserver) {

    window.statisticsThemeObserver.disconnect()

    window.statisticsThemeObserver = null

  }

  if(window.pageviewAbortController) {

    window.pageviewAbortController.abort()

    window.pageviewAbortController = null

  }

  ;['postsCalendar', 'postsChart', 'tagsChart', 'categoriesChart', 'creationClockChart', 'articleSizeChart', 'categoryTagSunburstChart', 'pageviewChart', 'pageviewHeatChart', 'pageviewRegionChart', 'pageviewRegionCompareChart', 'pageviewCommentRegionChart', 'pageviewCalendarChart', 'pageviewGrowthChart'].forEach(function(name) {

    window[name] = undefined

  })

  window.updatePageviewChartTheme = undefined

  window.ShokaStatisticsCharts = null

}

const mountStatisticsCharts = function () {

  var scripts = Array.prototype.slice.call(document.querySelectorAll('script[type="text/x-shoka-statistics"]'))

  if(!scripts.length || !CONFIG.js.echarts)

    return

  var sameScripts = function(previous) {

    return previous && previous.length === scripts.length && scripts.every(function(script, index) {

      return script.isConnected && script === previous[index]

    })

  }

  // Repeated mounts must not dispose already-running charts or restart a pending load.

  if(statisticsAssetLoad && sameScripts(statisticsAssetLoad.scripts)) return

  if(window.ShokaStatisticsCharts && sameScripts(statisticsMountedScripts)) return

  destroyStatisticsCharts()

  var currentLoadId = statisticsLoadId

  var notices = []

  var state = { scripts: scripts, pending: false, attempt: 0, cancel: null, clearNotices: function() {

    notices.forEach(function(entry) {

      entry.target.setAttribute('aria-busy', 'false')

      var parent = entry.notice.parentNode || entry.notice.parentElement

      if(parent) parent.removeChild(entry.notice)

    })

    notices = []

  } }

  statisticsAssetLoad = state

  var isCurrent = function() {

    return statisticsAssetLoad === state && currentLoadId === statisticsLoadId && scripts[0].isConnected

  }

  var updateNotices = function(failed) {

    if(failed) state.hasFailed = true

    if(!notices.length) {

      scripts.forEach(function(script) {

        ;[].concat(statisticsTargetByScript[script.id] || []).forEach(function(id) {

          var target = document.getElementById(id)

          if(!target) return

          var notice = document.createElement('div')

          notice.className = 'component-load-status statistics-load-status'

          notice.setAttribute('role', 'status')

          notice.setAttribute('aria-live', 'polite')

          var label = document.createElement('span')

          label.className = 'component-load-status__message'

          var retry = document.createElement('button')

          retry.type = 'button'

          retry.textContent = '重新加载图表'

          retry.addEventListener('click', function() { loadAssets() })

          notice.appendChild(label)

          notice.appendChild(retry)

          target.appendChild(notice)

          notices.push({ target: target, notice: notice, label: label, retry: retry })

        })

      })

    }

    notices.forEach(function(entry) {

      entry.target.setAttribute('aria-busy', failed ? 'false' : 'true')

      entry.notice.className = 'component-load-status statistics-load-status' + (failed ? ' is-error' : '')

      entry.notice.setAttribute('aria-busy', failed ? 'false' : 'true')

      entry.label.textContent = failed ? '图表资源暂时未能加载，请检查网络后重试。' : '正在加载图表资源…'

      // Keep the focused retry control visible while a manual attempt is pending.

      entry.retry.hidden = !failed && !state.hasFailed

      entry.retry.disabled = !failed

    })

  }

  var loadAssets = function() {

    if(!isCurrent() || state.pending) return

    state.pending = true

    var attempt = ++state.attempt

    updateNotices(false)

    var fail = function() {

      if(!isCurrent() || !state.pending || attempt !== state.attempt) return

      state.pending = false

      state.cancel = null

      updateNotices(true)

    }

    state.cancel = getScript(assetUrl('js', 'echarts'), function() {

      if(!isCurrent() || !state.pending || attempt !== state.attempt) return

      if(!window.echarts || typeof window.echarts.init !== 'function') { fail(); return }

      state.pending = false

      state.clearNotices()

      statisticsAssetLoad = null

      statisticsMountedScripts = scripts

      installCharts()

    }, window.echarts && typeof window.echarts.init === 'function', CONFIG.fallback && CONFIG.fallback.js.echarts, fail)

  }

  var installCharts = function() {

    var chartEntries = []

    var cleanups = []

    var motionCharts = new Set()

    var destroyed = false

    var resizeTimer = null

    var lazyObserver = null

    var resizeHandler = function () {

      window.clearTimeout(resizeTimer)

      resizeTimer = window.setTimeout(function () {

        chartEntries.forEach(function(entry) {

          if(entry.chart && !entry.chart.isDisposed())

            (entry.resize || function () { entry.chart.resize() })()

        })

      }, 120)

    }

    window.ShokaStatisticsCharts = {

      bindMotion: function(chart) {

        var motion = window.ShokaMotion

        if(!chart || motionCharts.has(chart) || !motion || typeof motion.subscribe !== 'function' || typeof chart.setOption !== 'function') return

        motionCharts.add(chart)

        var setOption = chart.setOption

        var initialOption = typeof chart.getOption === 'function' ? chart.getOption() : null

        var preferred = !initialOption || initialOption.animation !== false

        var applyMotion = function() {

          if(!destroyed && !chart.isDisposed()) setOption.call(chart, { animation: preferred && !motion.reduced() })

        }

        chart.setOption = function(option) {

          if(destroyed || chart.isDisposed()) return

          if(option && Object.prototype.hasOwnProperty.call(option, 'animation')) preferred = option.animation !== false

          var args = Array.prototype.slice.call(arguments)

          args[0] = Object.assign({}, option, { animation: preferred && !motion.reduced() })

          return setOption.apply(chart, args)

        }

        var unsubscribe = motion.subscribe(applyMotion)

        applyMotion()

        cleanups.push(function() { if(typeof unsubscribe === 'function') unsubscribe() })

      },

      register: function(chart, resize, describe) {

        if(!chart || destroyed) return

        chartEntries.push({ chart: chart, resize: resize })

        this.bindMotion(chart)

        cleanups.push(bindStatisticsDetails(chart, describe, function() {

          return !destroyed && currentLoadId === statisticsLoadId

        }))

      },

      addCleanup: function(cleanup) {

        if(destroyed) cleanup()

        else cleanups.push(cleanup)

      },

      setObserver: function(observer) {

        lazyObserver = observer

      },

      destroy: function() {

        if(destroyed) return

        destroyed = true

        cleanups.forEach(function(cleanup) { cleanup() })

        cleanups = []

        window.clearTimeout(resizeTimer)

        window.removeEventListener('resize', resizeHandler)

        if(lazyObserver) lazyObserver.disconnect()

        chartEntries.forEach(function(entry) {

          if(entry.chart && !entry.chart.isDisposed()) entry.chart.dispose()

        })

        chartEntries = []

      }

    }

    window.addEventListener('resize', resizeHandler)

    var execute = function(script) {

      if(destroyed || !script || !script.isConnected || script.dataset.executed === 'true') return

      script.dataset.executed = 'true'

      var runtime = document.createElement('script')

      runtime.dataset.statisticsRuntime = ''

      runtime.textContent = script.textContent

      document.body.appendChild(runtime)

      document.body.removeChild(runtime)

      // Charts are lazy: apply saved/custom colors as soon as each chart exists.

      if(typeof window.switchPostChart === 'function' && document.documentElement.dataset.palette === 'custom' && document.getElementById('posts-calendar'))

        window.switchPostChart()

    }

    var themeRuntime = document.getElementById('statisticsThemeRuntime')

    execute(themeRuntime)

    var targetByScript = statisticsTargetByScript

    var chartScripts = scripts.filter(function(script) { return targetByScript[script.id] })

    if(!window.IntersectionObserver) {

      chartScripts.forEach(execute)

      return

    }

    lazyObserver = new IntersectionObserver(function(entries, observer) {

      if(currentLoadId !== statisticsLoadId) return

      entries.forEach(function(entry) {

        if(!entry.isIntersecting && entry.intersectionRatio <= 0) return

        var scriptId = entry.target.dataset.statisticsScript

        execute(document.getElementById(scriptId))

        observer.unobserve(entry.target)

      })

    }, { rootMargin: '280px 0px' })

    window.ShokaStatisticsCharts.setObserver(lazyObserver)

    chartScripts.forEach(function(script) {

      ;[].concat(targetByScript[script.id]).forEach(function(id) {

        var chart = document.getElementById(id)

        if(!chart) return

        var target = script.id === 'pageviewChart' ? chart.closest('section') || chart : chart

        target.dataset.statisticsScript = script.id

        lazyObserver.observe(target)

      })

    })

  }

  loadAssets()

}

  destroyStatisticsCharts()

  mountStatisticsCharts()

      echarts: theme.vendors.js.echarts,

        echarts: config.root + theme.js + '/echarts-custom.min.js',

import * as echarts from 'echarts/core'

import {

  BarChart,

  HeatmapChart,

  LineChart,

  MapChart,

  PieChart,

  ScatterChart,

  SunburstChart

  CalendarComponent,

  DataZoomComponent,

  GraphicComponent,

  GeoComponent,

  GridComponent,

  LegendComponent,

  MarkLineComponent,

  PolarComponent,

  TitleComponent,

  TooltipComponent,

  VisualMapComponent

} from 'echarts/components'

import { CanvasRenderer } from 'echarts/renderers'

echarts.use([

  BarChart,

  HeatmapChart,

  LineChart,

  MapChart,

  PieChart,

  ScatterChart,

  TitleComponent,

  TooltipComponent,

  VisualMapComponent,