chart-tool-hackathon/index.html at main · CodingWatchCollector/chart-tool-hackathon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Data Visualization Tool</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="container flex f-wrap">
      <h1>Data Visualization Tool</h1>
      <label for="theme-toggle" class="flex align-center gap">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          height="24px"
          viewBox="0 0 24 24"
          width="24px"
          fill="currentColor"
        >
          <path d="M0 0h24v24H0V0z" fill="none" />
          <path
            d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 6.5v11c3.03 0 5.5-2.47 5.5-5.5S15.03 6.5 12 6.5z"
          />
        </svg>
        Toggle dark mode
        <input type="checkbox" id="theme-toggle" />
      </label>
    </header>

    <main class="stack stack-large container">
      <section id="upload-section" class="stack stack-base">
        <h2>Import your data</h2>
        <fieldset id="radio-fieldset" class="stack stack-base">
          <legend>Choose the way to import your data</legend>
          <div id="drag-n-drop--area" role="button" class="drag-n-drop-area">
            Drag & Drop your files here
          </div>
          <div class="stack stack-small">
            <label for="file-input">Or browse for file</label>
            <input type="file" id="file-input" accept=".csv, .xlsx, .json" />
          </div>
          <div class="stack stack-small">
            <label for="manual-input">Or manually paste your data</label>
            <textarea
              id="manual-input"
              placeholder="paste your data here (CSV, JSON)"
            ></textarea>
            <button type="button" id="manual-input--validate-btn">
              Validate pasted data
            </button>
          </div>
        </fieldset>
      </section>

      <section id="preview-section" aria-live="polite" class="stack stack-base">
        <h2>Data Preview</h2>
        <button id="preview-btn" aria-label="Preview Data">Preview Data</button>
        <div
          id="preview-area"
          role="region"
          aria-labelledby="Caption01"
          tabindex="0"
        ></div>
      </section>

      <section id="visualization-section" class="stack stack-base">
        <h2>Visualization</h2>
        <div id="chart-controls" class="stack stack-base">
          <div class="stack stack-small">
            <label for="chart-type">Select Chart Type</label>
            <select id="chart-type">
              <option value="line">Line Chart</option>
              <option value="bar">Bar Chart</option>
              <option value="pie">Pie Chart</option>
            </select>
          </div>
          <button id="generate-btn" aria-label="Generate Chart">
            Generate Chart
          </button>
        </div>
        <div id="chart-area" aria-live="polite"></div>

        <!-- TODO: add customization (labels/colors/legend) to chart options -->
        <!-- <div id="customization-panel">
          <label for="chart-title">Chart Title</label>
          <input type="text" id="chart-title" placeholder="Enter chart title" />
          <label for="x-axis">X-Axis Label</label>
          <input type="text" id="x-axis" placeholder="X-Axis Label" />
          <label for="y-axis">Y-Axis Label</label>
          <input type="text" id="y-axis" placeholder="Y-Axis Label" />
          <label for="color-picker">Choose Colors</label>
          <input type="color" id="color-picker" />
        </div> -->
      </section>

      <section id="export-section" class="stack stack-base">
        <h2>Export data</h2>
        <div class="cluster">
          <button id="export-png">Export PNG</button>
          <button id="export-svg">Export SVG</button>
          <button id="export-pdf">Export PDF</button>
          <button id="print-chart">Print</button>
        </div>
      </section>
    </main>

    <script src="app.js" type="module"></script>
  </body>
  <template id="table-template">
    <table>
      <caption id="Caption01">
        Uploaded data preview
      </caption>
      <thead>
        <tr id="table-header"></tr>
      </thead>
      <tbody id="table-body"></tbody>
    </table>
  </template>
</html>