Gitiles
Code Review Sign In
code.v1.dodo.cloud / sketch / af2d7e3940d063e4e5dfed2abed69c698f9b04fc / . / loop / webui / src / web-components / demo / sketch-charts.demo.html
blob: 64a9bd29b5b555ce0cfbe896115728f4acc98c9e [file] [log] [blame]
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]1<!doctype html>
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]2<html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Sketch Charts Demo</title>
Pokey Rulee2a8c2f2025-04-23 15:09:25 +0100[diff] [blame]6 <script type="module" src="../sketch-charts.ts"></script>
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]7 <link rel="stylesheet" href="demo.css" />
8 <style>
9 sketch-charts {
10 margin: 20px;
11 max-width: 1000px;
12 }
13
14 body {
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]15 font-family:
16 system-ui,
17 -apple-system,
18 BlinkMacSystemFont,
19 "Segoe UI",
20 Roboto,
21 sans-serif;
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]22 }
23 </style>
24 </head>
25 <body>
26 <h1>Sketch Charts Demo</h1>
27 <sketch-charts id="charts"></sketch-charts>
28
29 <script>
30 // Sample data for testing
31 const sampleMessages = [
32 {
33 idx: 1,
34 type: "human",
35 content: "Hello, can you help me with a coding task?",
36 timestamp: new Date(Date.now() - 3600000).toISOString(),
37 usage: { cost_usd: 0.0001 },
38 },
39 {
40 idx: 2,
41 type: "assistant",
42 content:
43 "I'd be happy to help! What kind of coding task are you working on?",
44 timestamp: new Date(Date.now() - 3500000).toISOString(),
45 usage: { cost_usd: 0.0005 },
46 },
47 {
48 idx: 3,
49 type: "human",
50 content: "I need to create a web component using lit-element",
51 timestamp: new Date(Date.now() - 3400000).toISOString(),
52 usage: { cost_usd: 0.0001 },
53 },
54 {
55 idx: 4,
56 type: "assistant",
57 content:
58 "I can definitely help with that. Lit Element is a great library for building web components.",
59 timestamp: new Date(Date.now() - 3300000).toISOString(),
60 usage: { cost_usd: 0.0008 },
61 },
62 {
63 idx: 5,
64 type: "assistant",
65 tool_name: "bash",
66 input: "ls -la",
67 tool_result:
68 "total 16\ndrwxr-xr-x 4 user staff 128 Jan 10 12:34 .\ndrwxr-xr-x 10 user staff 320 Jan 10 12:34 ..\n-rw-r--r-- 1 user staff 123 Jan 10 12:34 file1.txt\n-rw-r--r-- 1 user staff 456 Jan 10 12:34 file2.txt",
69 start_time: new Date(Date.now() - 3200000).toISOString(),
70 end_time: new Date(Date.now() - 3190000).toISOString(),
71 timestamp: new Date(Date.now() - 3190000).toISOString(),
72 usage: { cost_usd: 0.0002 },
73 },
74 {
75 idx: 6,
76 type: "assistant",
77 content: "Let me create a basic web component for you.",
78 timestamp: new Date(Date.now() - 3100000).toISOString(),
79 usage: { cost_usd: 0.0015 },
80 },
81 {
82 idx: 7,
83 type: "human",
84 content: "Can you show me how to handle events in the web component?",
85 timestamp: new Date(Date.now() - 3000000).toISOString(),
86 usage: { cost_usd: 0.0001 },
87 },
88 {
89 idx: 8,
90 type: "assistant",
91 tool_name: "bash",
92 input: "cat example.ts",
93 tool_result:
94 "import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('my-element')\nexport class MyElement extends LitElement {\n render() {\n return html`<div>Hello World</div>`;\n }\n}",
95 start_time: new Date(Date.now() - 2900000).toISOString(),
96 end_time: new Date(Date.now() - 2800000).toISOString(),
97 timestamp: new Date(Date.now() - 2800000).toISOString(),
98 usage: { cost_usd: 0.0003 },
99 },
100 {
101 idx: 9,
102 type: "assistant",
103 content:
104 "Here's how you can handle events in a web component using Lit.",
105 timestamp: new Date(Date.now() - 2700000).toISOString(),
106 usage: { cost_usd: 0.002 },
107 },
108 {
109 idx: 10,
110 type: "human",
111 content: "Thank you! How about adding properties and attributes?",
112 timestamp: new Date(Date.now() - 2600000).toISOString(),
113 usage: { cost_usd: 0.0001 },
114 },
115 {
116 idx: 11,
117 type: "assistant",
118 content:
119 "You can use the @property decorator to define properties in your Lit Element component.",
120 timestamp: new Date(Date.now() - 2500000).toISOString(),
121 usage: { cost_usd: 0.0025 },
122 },
123 ];
124
125 // Set sample data as soon as the component is defined
126 document.addEventListener("DOMContentLoaded", () => {
127 console.time("chart-demo-load");
128 const chartsComponent = document.getElementById("charts");
129 chartsComponent.messages = sampleMessages;
130 console.timeEnd("chart-demo-load");
131 });
132 </script>
133 </body>
134</html>