25:["$","title",null,{"children":"二维折线图，下拉单选框，近 n 日 | Bruce He | Observable"}] 49:T8a3,data = [ { time: "201901", TLJ: "广州", province: "广东", count: 1.92098 }, { time: "201902", TLJ: "广州", province: "广东", count: 1.796244 }, { time: "201903", TLJ: "广州", province: "广东", count: 2.34 }, { time: "201904", TLJ: "广州", province: "广东", count: 2.5876 }, { time: "201905", TLJ: "广州", province: "广东", count: 1.873 }, { time: "201906", TLJ: "广州", province: "广东", count: 2.32907 }, { time: "201907", TLJ: "广州", province: "广东", count: 1.92098 }, { time: "201908", TLJ: "广州", province: "广东", count: 1.796244 }, { time: "201909", TLJ: "广州", province: "广东", count: 2.34 }, { time: "2019010", TLJ: "广州", province: "广东", count: 2.5876 }, { time: "201911", TLJ: "广州", province: "广东", count: 1.873 }, { time: "201912", TLJ: "广州", province: "广东", count: 2.32907 }, { time: "201901", TLJ: "武汉", province: "湖北", count: 2.4056 }, { time: "201902", TLJ: "武汉", province: "湖北", count: 1.634908 }, { time: "201903", TLJ: "武汉", province: "湖北", count: 2.09865 }, { time: "201904", TLJ: "武汉", province: "湖北", count: 2.40977 }, { time: "201905", TLJ: "武汉", province: "湖北", count: 2.58026 }, { time: "201906", TLJ: "武汉", province: "湖北", count: 2.358026 }, { time: "201901", TLJ: "上海", province: "上海", count: 2.0 }, { time: "201902", TLJ: "上海", province: "上海", count: 2.55 }, { time: "201903", TLJ: "上海", province: "上海", count: 1.9 }, { time: "201904", TLJ: "上海", province: "上海", count: 2.3 }, { time: "201905", TLJ: "上海", province: "上海", count: 1.873 }, { time: "201906", TLJ: "上海", province: "上海", count: 2.32907 }, { time: "201901", TLJ: "乌鲁木齐", province: "新疆", count: 2.4056 }, { time: "201902", TLJ: "乌鲁木齐", province: "新疆", count: 2.34908 }, { time: "201903", TLJ: "乌鲁木齐", province: "新疆", count: 2.09865 }, { time: "201904", TLJ: "乌鲁木齐", province: "新疆", count: 2.440977 }, { time: "201905", TLJ: "乌鲁木齐", province: "新疆", count: 2.58026 }, { time: "201906", TLJ: "乌鲁木齐", province: "新疆", count: 1.658026 } ]4a:T87e,option = { let [timeDim, mergedDim] = finalDim; let [metric] = metrics; return { tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, formatter: echartsLikeTooltipFormatter }, // legend: { // type: 'scroll' // }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: { type: "category", data: _.uniq((finalDat || []).map((d) => d[timeDim])), //data: (data || []).map((d) => dimensions.map(dim => _.trim(d[dim])).join('-')), //axisLabel: { rotate: 30 }, axisTick: { alignWithLabel: true }, axisLine: { onZero: false } }, yAxis: { type: "value", boundaryGap: [0, 0.01], scale: true //非0 }, color: [ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ], series: [ ..._.map(groupedData, (arr, group) => { return { name: group, type: "line", symbol: "emptyCircle", data: arr.map((d) => _.round(d[metric], 2)), areaStyle: { normal: {} }, smooth: true, markLine: { silent: true, lineStyle: { color: "#FBDB10", type: "solid" }, label: { position: "insideStartTop", color: "#FBDB10", formatter: "均值：{c}", textShadowColor: "#fff", textShadowBlur: 0.5, textShadowOffsetX: 0.5, textShadowOffsetY: 0.5, fontSize: 14 }, data: [ { yAxis: _.round(_.meanBy(arr, metric), 2) } ] }, markPoint: { data: [ { type: "max", name: "Max" }, { type: "min", name: "Min" } ], label: { formatter: (params) => { return metricFormatterFn(params.value); } } } }; }) ] }; }4b:[] 29:{"id":"c12c0aed02ac7e7a","slug":null,"title":"二维折线图，下拉单选框，近 n 日","thumbnail":"1a72502d4f41515594889f076090a3a0773447cd00fa17f53d0e67fa3a929fc8","access_level":"public","create_time":"$D2023-01-11T03:23:56.584Z","update_time":"$D2023-01-16T07:20:16.794Z","view_time":null,"first_public_time":"$D2023-01-11T03:23:56.584Z","has_unpublished_edits":null,"fork":{"id":"d2517e75f22e69bb","slug":"0-0","title":"二维折线图（非0，标记，0°），单位","owner":{"id":"005a2fa9e2ef197b","login":"shihenghe","name":"shihenghe"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5e3282f592b2837f","login":"heganjie","name":"Bruce He","avatar_url":"https://avatars-next.observableusercontent.com/58d33228761b95f76b498c59d4664893e0c8b694acb62ff0342f8d22ebafb8e3","tier":"starter_2024","bio":"Biu biu biu...","followed_by_you":false,"follows_you":false},"version":1665,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8bc3b438d4504c1b","login":"heganjie","name":"Bruce He","avatar_url":"https://avatars-next.observableusercontent.com/58d33228761b95f76b498c59d4664893e0c8b694acb62ff0342f8d22ebafb8e3","tier":null,"bio":"Biu biu biu...","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8bc3b438d4504c1b","login":"heganjie","name":"Bruce He","avatar_url":"https://avatars-next.observableusercontent.com/58d33228761b95f76b498c59d4664893e0c8b694acb62ff0342f8d22ebafb8e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"二维折线图，下拉单选框，近 n 日","cells":[{"id":0,"value":"# 二维折线图，下拉单选框，近 n 日","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"main = {\n let dom = html`

\n ${selectInput}\n ${isShowSelect ? search : \"\"}\n ${isShowSelect ? dimList : []}\n

`;\n setTimeout(() => {\n const k = getUserStorageKey();\n const val = sessionStorage.getItem(k);\n if (val && chooseDims[0] !== val) {\n mutable chooseDims = [val];\n }\n }, 100);\n return dom;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"mutable searchWord = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"mutable chooseDims = _.take(legend, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"mutable isShowSelect = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1620,"value":"findParentBySelector = {\n function collectionHas(a, b) {\n //helper function (see below)\n for (var i = 0, len = a.length; i < len; i++) {\n if (a[i] == b) return true;\n }\n return false;\n }\n return function findParentBySelector(elm, selector) {\n var all = document.querySelectorAll(selector);\n var cur = elm.parentNode;\n while (cur && !collectionHas(all, cur)) {\n //keep going up until you find a match\n cur = cur.parentNode; //go up\n }\n return cur; //will return null if not found\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"legend = _.keys(_.groupBy(finalDat, \"mergedDim\")).filter((l) =>\n _.includes(l, searchWord)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"getNoChooseDims = () => _.filter(legend, (d) => !_.includes(chooseDims, d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"search = {\n let dom = html`

\n \n \n

`;\n dom.addEventListener(\"change\", (e) => {\n const value = e.target.value || \"\";\n mutable searchWord = value;\n const originLegends = _.keys(_.groupBy(finalDat, \"mergedDim\"));\n const matched = _.filter(originLegends, (l) => _.includes(l, value));\n mutable chooseDims = _.take(matched, 1);\n });\n return dom;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"selectInput = {\n let input = html``;\n //筛选结果栏输入框获取焦点事件\n input.onclick = () => {\n mutable isShowSelect = !isShowSelect;\n };\n return input;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"// 维度栏\ndimList = {\n let ls = html`

${len}

`;\n ls.onclick = (e) => {\n const val = e.target.innerText;\n mutable isShowSelect = false;\n mutable chooseDims = [val];\n sessionStorage.setItem(getUserStorageKey(), val);\n };\n return ls;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1654,"value":"hashCode = function (str) {\n var hash = 0,\n i,\n chr;\n if (str.length === 0) return hash;\n for (i = 0; i < str.length; i++) {\n chr = str.charCodeAt(i);\n hash = (hash << 5) - hash + chr;\n hash |= 0; // Convert to 32bit integer\n }\n return hash;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1580,"value":"function getUserStorageKey() {\n const userId = _.get(window.sugo, \"user.id\", \"unknown-user\");\n const hash = hashCode(\n `${userId}:${slice.params.metrics}:${slice.params.tabKey}`\n );\n return `sliceTmpSetting:${hash}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"groupedData = {\n return _.groupBy(\n _.filter(finalDat, (d) => _.includes(chooseDims, d.mergedDim)),\n \"mergedDim\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"// 2021.12.10 二维折线图1（标注最大值最小值）\n// 单指标；2个维度（时间维度 + 其他维度合并一维）；源数据保留2位小数；","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"dimensions = [\"time\", \"TLJ\", \"province\", \"city\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"finalDim = [_.first(dimensions), \"mergedDim\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"metrics = ['count']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"finalDat = {\n let restDims = _.drop(dimensions, 1);\n const data2 = await queryData(data);\n return _.map(data2, (d) => {\n return {\n ...d,\n mergedDim: `${restDims.map((dim) => _.trim(d[dim])).join(\"-\")}`\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"async function queryData(data0) {\n // 时间：默认取值最近 n 天，至昨天; n 根据 timeRange 计算\n const timeDim =\n _.find([\"YEAR\", \"MONTH\", \"DAY\"], (dimName) => _.get(data0, [0, dimName])) ||\n \"MONTH\";\n let latestData = await modifyParamsAndQuery((slice) => {\n const timeRange = _.get(slice, \"params.extraData.timeRange\") || [];\n const dt = moment().add(-1, timeDim).diff(timeRange[1], timeDim);\n\n return copyOnUpdate(slice, \"params.extraData.timeRange\", (arr) =>\n _.map(arr, (t, ti) => {\n // dt = 昨天 - until\n // next = timeRange + dt\n return moment(t, \"YYYY-MM-DD\").add(dt, timeDim).format(\"YYYY-MM-DD\");\n })\n );\n });\n return _.get(latestData, \"resultSet\") || [];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1639,"value":"slice = ({id: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"copyOnUpdate = _.identity","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"moment = window.moment || require(\"moment\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"modifyParamsAndQuery = async (mapper) => {\n return {\n _tempMetric_xx: 0,\n resultSet: data\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"translationDict = ({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"metricsFormatDict = ({\n [metrics[0]]: x => x\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"metricFormatterFn = metricsFormatDict[metrics[0]] || _.identity","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"echartsLikeTooltipFormatter = params => {\n let arr = _(params).filter(p => p.value !== undefined && isFinite(p.value)).take(15).map((p, pi) => {\n let seriesName = p.seriesName\n let seriesFormatted = seriesName\n let val = metricFormatterFn(p.value)\n //let valHtml = `${val}`\n let valHtml = `${val}`\n return `${seriesFormatted} : ${valHtml}`\n }).value()\n\n let xVal = params[0].name\n \n return `${xVal}
${arr.join('
')}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"chartInst = echarts.init(main.querySelector('.dims-chart'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"chartInst.setOption(option, { notMerge: true, lazyUpdate: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"(width, chartInst.resize()) // 自适应宽度","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"echarts = window.echarts || require(\"https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"_ = window._ || require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null