29:null 2a:["$","title",null,{"children":"GUI (beta) | 廖晓娟 | Observable"}] 2f:T53d,viewof AxisTitle = Inputs.form({ show: Inputs.radio([true, false], { label: "Show title", value: true }), content: Inputs.text({ label: "Axis title", value: "Axis Title" }), // a: Inputs.radio(["A", "B"], { label: "Select one" }), titleAnchor: Inputs.select(["start", "end", "center"], { label: "Title Anchor", value: "center" }), offset: Inputs.number([], { label: "Offset", value: 0 }), rotation: Inputs.number([], { label: "Rotation", value: 0, step: 10 }), titlePadding: Inputs.number([], { label: "Title padding", value: 4 }), customPositionX: Inputs.radio([true, false], { label: "Custom PositionX", value: false }), positionX: Inputs.number([], { label: "PositionX", value: null, step: 10 }), customPositionY: Inputs.radio([true, false], { label: "Custom PositionY", value: false }), positionY: Inputs.number([], { label: "PositionY", value: null, step: 10 }), maxLength: Inputs.number([], { label: "Max Length", value: Infinity, step: 5 }), // style textAlign: Inputs.select(["start", "center", "end"], { label: "Style.textAlign", value: "center" }), textBaseline: Inputs.select(["top", "middle", "bottom"], { label: "Style.textBaseline", value: "top" }), fill: Inputs.color({ label: "Style.fill", value: "#000" }) })30:T46e,Axis2 = { const { show: showAxisLine, startArrow, endArrow, stroke, lineWidth } = AxisLine; const axis = new GUI.Linear({ style: { startPos: [10, 40], endPos: [410, 40], ticks, axisLine: { style: { lineWidth: 0.5 } }, tickLine: { len: 6 }, title: { content: "Axis title" }, axisLine: !showAxisLine ? undefined : { arrow: { start: startArrow ? { symbol: "axis-arrow", size: 8, fill: stroke, fillOpacity: 1 } : null, end: endArrow ? { symbol: "axis-arrow", size: 8, fill: stroke, fillOpacity: 1 } : null }, style: { strokeOpacity: 0.85, stroke, lineWidth } } } }); const canvas = createCanvas("axis2", 110); canvas.appendChild(axis); return axis; }31:T47a,Axis3 = { const { show: showAxisTickLine, len, stroke, lineWidth, strokeOpacity } = AxisTickLine; const { show: showAxisSubTickLine, len: len2, count, stroke: stroke2, lineWidth: lineWidth2, strokeOpacity: strokeOpacity2 } = AxisSubTickLine; const axis = new GUI.Linear({ style: { startPos: [10, 40], endPos: [410, 40], ticks, axisLine: { style: { lineWidth: 0.5 } }, tickLine: { len: 6 }, title: { content: "Axis title" }, tickLine: !showAxisTickLine ? undefined : { len, style: { strokeOpacity: 0.85, stroke, lineWidth, strokeOpacity } }, subTickLine: !showAxisSubTickLine ? undefined : { len: len2, count, style: { strokeOpacity: 0.85, stroke: stroke2, lineWidth: lineWidth2, strokeOpacity: strokeOpacity2 } } } }); const canvas = createCanvas("axis3", 110); canvas.appendChild(axis); return axis; }32:T526,Axis5 = { const axis = new GUI.Linear({ style: { startPos: [10, 40], endPos: [410, 40], ticks: ticks4, axisLine: { style: { lineWidth: 0.5 } }, tickLine: { len: 6 }, // title: { content: "Axis title" }, label: { // overlapOrder: ["autoEllipsis", "autoHide"], autoEllipsis: true, margin: [0, 2], rotation: 60, verticalLimitLength: 56, autoHideTickLine: false, style: (datum, idx) => { return { fill: "black", fillOpacity: 0.65, fontSize: 12, textAlign: idx === 0 ? "start" : idx === ticks4.length - 1 ? "end" : "center" }; } } } }); const canvas = createCanvas("layout-axis-bounds", 110); canvas.appendChild(axis); canvas.appendChild( new G.Rect({ style: { x: 4, width: 412, y: 10, height: 80, stroke: "#999", lineWidth: 0.5 } }) ); canvas.appendChild(createText(10, 10, "(10, 10)")); canvas.appendChild( createText(410, 90, "(410, 90)", { textAlign: "center", textBaseline: "top", dy: 2 }) ); canvas.appendChild(createCircle(10, 10, 3)); canvas.appendChild(createCircle(410, 90, 3)); return axis; }33:Tb16,categoryLegend = { const category = new GUI.Category({ style: { anchor: [0, 0, 0], origin: { "0": 0, "1": 0, "2": 0 }, opacity: 1, fillOpacity: 1, strokeOpacity: 1, fill: "transparent", stroke: "transparent", zIndex: 0, visibility: "visible", x: 45, y: 0, padding: 0, orient: "horizontal", backgroundStyle: { default: { fill: "white", lineWidth: 0 } }, title: { content: "product_sub_type", spacing: 0, align: "left", style: { fill: "#2C3542", fillOpacity: 0.45, fontSize: 12, textBaseline: "top" } }, label: { style: { fill: "#2C3542", fillOpacity: 0.65, fontSize: 12 } }, type: "category", items: [ { id: "橡皮擦", name: "橡皮擦", state: "selected", color: "#5B8FF9" }, { id: "书架", name: "书架", state: "selected", color: "#5AD8A6" }, { id: "砚台", name: "砚台", state: "selected", color: "#5D7092" }, { id: "洗衣机", name: "洗衣机", state: "selected", color: "#F6BD16" }, { id: "微波炉", name: "微波炉", state: "selected", color: "#6F5EF9" }, { id: "电磁炉", name: "电磁炉", state: "selected", color: "#6DC8EC" }, { id: "电脑", name: "电脑", state: "selected", color: "#945FB9" }, { id: "switch", name: "switch", state: "selected", color: "#FF9845" }, { id: "鼠标", name: "鼠标", state: "selected", color: "#1E9493" } ], spacing: [10, 10], itemName: { spacing: 0, style: { default: { fill: "#d3d2d3", fontSize: 12, opacity: 1, fontWeight: "normal", textBaseline: "middle" }, selected: { // fill: "#646464", opacity: 1, textBaseline: "middle", fontSize: 12 }, active: { opacity: 0.5, textBaseline: "middle" } } }, itemValue: { spacing: 5, align: "right", style: { default: { fill: "#d3d2d3", fontSize: 12, opacity: 1, fontWeight: "normal", textBaseline: "middle" }, selected: { fill: "#646464", textBaseline: "middle", opacity: 1 }, active: { textBaseline: "middle", opacity: 0.5 } } }, itemBackgroundStyle: { default: { fill: "#fff" }, selected: { opacity: 1, fill: "#fff" }, active: { opacity: 1, fill: "#fff" } }, reverse: false, pageNavigator: { loop: false }, maxWidth: 565, maxHeight: 40 } }); const canvas = createCanvas("category-legend", 80); canvas.appendChild(category); return category; }34:[] 2d:{"id":"25b45d95b0f7d1ba","slug":"gui-beta","title":"GUI (beta)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-04-22T13:14:29.720Z","update_time":"$D2022-06-20T08:53:44.527Z","view_time":null,"first_public_time":"$D2022-05-30T01:58:24.340Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"43eb0216033f303e","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":"starter_2024"},"version":534,"publish_version":534,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c057a398a73f6b0","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":null}],"members":[{"type":"individual","id":"6c057a398a73f6b0","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"GUI (beta)","cells":[{"id":0,"value":"# GUI (beta)\n\n- [Axis](https://observablehq.com/d/25b45d95b0f7d1ba#cell-20)\n- [Timeline](https://observablehq.com/d/25b45d95b0f7d1ba#cell-510)\n- [Slider](https://observablehq.com/d/25b45d95b0f7d1ba#cell-527)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":510,"value":"## Timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":513,"value":"timeline1 = {\n const timeline = new GUI.Timeline({\n style: {\n x: 20,\n y: 20,\n width: 490,\n data: TIME_DATA,\n padding: [10, 0, 10, 10],\n playAxis: {\n appendPadding: [0, 0, 6]\n },\n controlButton: {\n spacing: 4,\n prevBtn: { size: 10 },\n playBtn: { size: 20, margin: 0 },\n nextBtn: { size: 10 }\n }\n }\n });\n createCanvas().appendChild(timeline);\n return timeline;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"## Slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"## Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":180,"value":"### Axis Title\n\n- **TitlePadding:** Indicator the padding in pixels between the axis labels and axis title.\n- **PositionX:** Custom X position of the axis title relative to the axis line, overriding the standard layout.\n- **PositionY:** Custom Y position of the axis title relative to the axis line, overriding the standard layout.\n- **MaxLength:** Specify the maximum allowed length in pixels of axis title.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":165,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"Axis1 = {\n const {\n show: showAxisTitle,\n textAlign,\n textBaseline,\n customPositionX,\n customPositionY,\n positionX,\n positionY,\n fill,\n ...axisTitleOptions\n } = AxisTitle;\n const canvas = createCanvas(\"axis1\", 80);\n const axis = new GUI.Linear({\n style: {\n container: canvas.appendChild(new G.Group()),\n startPos: [10, 20],\n endPos: [410, 20],\n ticks,\n axisLine: { style: { lineWidth: 0.5 } },\n tickLine: { len: 6 },\n title: !showAxisTitle\n ? null\n : {\n ...axisTitleOptions,\n positionX: customPositionX ? positionX : null,\n positionY: customPositionY ? positionY : null,\n style: {\n textAlign,\n textBaseline,\n fill\n }\n }\n }\n });\n canvas.appendChild(axis);\n return axis;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"### AxisLine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":271,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":263,"value":"viewof AxisLine = Inputs.form({\n show: Inputs.radio([true, false], {\n label: \"Show AxisLine\",\n value: true\n }),\n startArrow: Inputs.radio([true, false], {\n label: \"AxisLine startArrow\",\n value: false\n }),\n endArrow: Inputs.radio([true, false], {\n label: \"AxisLine endArrow\",\n value: false\n }),\n stroke: Inputs.color({ label: \"Stroke\", value: \"#000\" }),\n lineWidth: Inputs.number({ label: \"LineWidth\", value: 0.5 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"### TickLine、SubTickLine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":355,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":353,"value":"viewof AxisTickLine = Inputs.form({\n show: Inputs.radio([true, false], {\n label: \"Show Axis TickLine\",\n value: true\n }),\n len: Inputs.number({ label: \"Length of tickLine\", value: 6 }),\n stroke: Inputs.color({ label: \"Stroke\", value: \"#416180\" }),\n strokeOpacity: Inputs.number([0, 1], {\n label: \"Stroke opacity\",\n value: 0.65,\n step: 0.05\n }),\n lineWidth: Inputs.number({ label: \"Stroke width\", value: 0.5 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":368,"value":"viewof AxisSubTickLine = Inputs.form({\n show: Inputs.radio([true, false], {\n label: \"Show SubTickLine\",\n value: false\n }),\n len: Inputs.number({ label: \"Length\", value: 4 }),\n count: Inputs.number({ label: \"Counts\", value: 2 }),\n stroke: Inputs.color({ label: \"Stroke\", value: \"#416180\" }),\n strokeOpacity: Inputs.number([0, 1], {\n label: \"Stroke opacity\",\n value: 0.45,\n step: 0.05\n }),\n lineWidth: Inputs.number({ label: \"Stroke width\", value: 0.5 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"### Axis Label (todo)\n\n- **autoHide: The strategy to use for resolving overlap of axis labels by hiding overlapped labels.** If set to true or { type: \"parity\" }, a strategy of removing every other label is used (this works well for standard linear axes). If set to \"greedy\", a linear scan of the labels is performed, removing any label that overlaps with the last visible label.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":295,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":292,"value":"Axis4 = {\n const axis = new GUI.Linear({\n style: {\n startPos: [10, 40],\n endPos: [410, 40],\n ticks: ticks4,\n axisLine: { style: { lineWidth: 0.5 } },\n tickLine: { len: 6 },\n title: { content: \"Axis title\" },\n label: {\n overlapOrder: [\"autoEllipsis\", \"autoHide\"],\n autoEllipsis: true,\n margin: [0, 2],\n autoHide: true,\n autoHideTickLine: false,\n style: (datum, idx) => {\n return {\n fill: \"black\",\n fillOpacity: 0.65,\n fontSize: 12,\n dx: idx === 0 ? -4 : idx === ticks4.length - 1 ? 4 : 0,\n textAlign:\n idx === 0 ? \"start\" : idx === ticks4.length - 1 ? \"end\" : \"center\"\n };\n }\n }\n }\n });\n const canvas = createCanvas(\"layout-axis\", 110);\n canvas.appendChild(axis);\n return axis;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"- **autoRotate**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":440,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":436,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":389,"value":"ticks4 = {\n const data = [\n \"ABC\",\n \"BCED\",\n \"DEFGH\",\n \"GHIJKM\",\n \"KMLNOPQ\",\n \"PQRSTVVW\",\n \"VWXYZ\"\n ];\n const scale = new AS.Point({ domain: data, range: [0.02, 0.98] });\n return data.map((d, idx) => {\n return {\n value: scale.map(d),\n text: String(d),\n id: String(idx)\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"JSON.stringify(ticks4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"## Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":489,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":484,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":60,"value":"createCanvas = {\n return (container, height = 400) => {\n const canvasRenderer = new GCanvas.Renderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true\n });\n const div = document.createElement(\"div\");\n\n document.body.appendChild(div);\n return new G.Canvas({\n container: container || div,\n width: 800,\n height,\n renderer: canvasRenderer\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"createCircle = {\n return (x, y, r, fill = \"#000\") => {\n return new G.Circle({\n style: {\n x,\n y,\n r,\n fill\n }\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"createText = {\n return (x, y, text, options = {}) => {\n const {\n fontSize = 10,\n textAlign = \"left\",\n textBaseline = \"bottom\",\n dx = 0,\n dy = 0\n } = options;\n return new G.Text({\n style: { x, y, text, textAlign, textBaseline, fontSize, dx, dy }\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":51,"value":"ticks = {\n const domain = [\n \"星期一\",\n \"星期二\",\n \"星期三\",\n \"星期四\",\n \"星期五\",\n \"星期六\",\n \"星期日\"\n ];\n const scale = new AS.Band({ domain });\n const bandWidth = scale.getBandWidth();\n const ticks = domain.map((d) => ({\n value: scale.map(d) + bandWidth / 2,\n text: d\n }));\n return ticks;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"TIME_DATA = {\n const scale = new AS.Time({\n tickCount: 20,\n range: [0, 20],\n utc: true,\n domain: [new Date(2000, 0, 1), new Date(2000, 3, 1)]\n });\n const formatter = scale.getFormatter();\n\n return scale.getTicks().map((d) => ({ date: formatter(d) }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"AS = require(\"@antv/scale@0.4.4/dist/scale.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"GUI = require(\"https://gw.alipayobjects.com/os/antfincdn/9uFUcYZN%26k/gui.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"G = require(\"@antv/g\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"GCanvas = require(\"@antv/g-canvas\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"