fix: multiple obj pushing into container

Author: roopeshsn

chart.svg

@@ -16,11 +16,18 @@ <h1>Line Chart Generator</h1>
           <label for="real">
             Input the values (each separated by a comma)</label
           >
-          <input id="real" type="text" name="real" placeholder="50, 30, 40" />
-          <button type="submit" class="btn-submit">Generate</button>
+          <input
+            id="real"
+            type="text"
+            name="real"
+            placeholder="50, 30, 40, 30, 20, 100"
+          />
+          <button type="submit" class="btn btn-submit">Generate</button>
         </form>
       </div>
       <div id="chartContainer"></div>
+      <button class="btn btn-download-chart-as-svg">Download as SVG</button>
+      <!-- <button class="btn btn-download-chart-as-png">Download as PNG</button> -->
     </main>
   </body>
 </html>

index.html

@@ -1,19 +1,21 @@
 const svgPathContainer = document.getElementById("chartContainer")
 const formElement = document.getElementById("form")
 const input = document.getElementById("real")
+const downloadAsSvg = document.querySelector(".btn-download-chart-as-svg")
+// const downloadAsPng = document.querySelector(".btn-download-chart-as-png")
 
 const SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg"
 
 // default values
-let values = [50, 30, 40, 30, 20, 50, 75, 100]
+let values = [50, 30, 40, 30, 20, 100]
 
 function formatInput(input) {
   let formattedValues = []
   input = input.replace(/,/g, " ")
   let values = input.split(" ")
   values.forEach((value) => {
     if (value !== "") {
-      formattedValues.push(value)
+      formattedValues.push(parseInt(value))
     }
   })
   return formattedValues
@@ -37,8 +39,8 @@ function generateLineChart(values, spacing, lineCount) {
 
   const Y_AXIS = values.length
   const highest = findMax(values)
-  const WIDTH = Y_AXIS * spacing
-  const HEIGHT = highest + 50
+  const WIDTH = Y_AXIS * spacing + 50 < 200 ? 200 : Y_AXIS * spacing + 50
+  const HEIGHT = highest + 50 < 200 ? 200 : highest + 50
   const graphLine = highest / (lineCount - 1)
 
   newSVGElement.setAttribute("width", WIDTH)
@@ -53,14 +55,14 @@ function generateLineChart(values, spacing, lineCount) {
   gElText.classList.add("graph-text")
 
   // X-Axis and Y-Axis for the chart
-  X_LINE.setAttribute("x1", "0")
-  X_LINE.setAttribute("y1", "0")
-  X_LINE.setAttribute("x2", "0")
+  X_LINE.setAttribute("x1", "10")
+  X_LINE.setAttribute("y1", "10")
+  X_LINE.setAttribute("x2", "10")
   X_LINE.setAttribute("y2", `${HEIGHT}`)
 
   Y_LINE.setAttribute("x1", `${WIDTH}`)
   Y_LINE.setAttribute("y1", `${HEIGHT}`)
-  Y_LINE.setAttribute("x2", "0")
+  Y_LINE.setAttribute("x2", "10")
   Y_LINE.setAttribute("y2", `${HEIGHT}`)
 
   X_LINE.setAttribute("stroke", "black")
@@ -71,7 +73,7 @@ function generateLineChart(values, spacing, lineCount) {
   newSVGElement.appendChild(X_LINE)
   newSVGElement.appendChild(Y_LINE)
 
-  let d = `M0 ${HEIGHT - values[0]}`
+  let d = `M10 ${HEIGHT - values[0]}`
 
   values.forEach((value, idx, values) => {
     if (idx > 0) {
@@ -87,7 +89,7 @@ function generateLineChart(values, spacing, lineCount) {
     let textEl = document.createElementNS(SVG_NAMESPACE_URI, "text")
     let yPosition = HEIGHT - l * graphLine
 
-    lineEl.setAttribute("x1", "0")
+    lineEl.setAttribute("x1", "10")
     lineEl.setAttribute("y1", yPosition)
     lineEl.setAttribute("x2", WIDTH)
     lineEl.setAttribute("y2", yPosition)
@@ -116,12 +118,69 @@ function generateLineChart(values, spacing, lineCount) {
   svgPathContainer.appendChild(newSVGElement)
 }
 
+function downloadSVGAsText() {
+  const svg = document.querySelector("svg")
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  const base64doc = btoa(decodeURIComponent(encodeURIComponent(svg.outerHTML)))
+  const a = document.createElement("a")
+  const e = new MouseEvent("click")
+  a.download = "line_chart.svg"
+  a.href = "data:image/svg+xml;base64," + base64doc
+  a.dispatchEvent(e)
+}
+
+function downloadSVGAsPNG(e) {
+  const canvas = document.createElement("canvas")
+  const svg = document.querySelector("svg")
+  const base64doc = btoa(decodeURIComponent(encodeURIComponent(svg.outerHTML)))
+  const w = parseInt(svg.getAttribute("width"))
+  const h = parseInt(svg.getAttribute("height"))
+  const img_to_download = document.createElement("img")
+  img_to_download.src = "data:image/svg+xml;base64," + base64doc
+  console.log(w, h)
+  img_to_download.onload = function () {
+    canvas.setAttribute("width", w)
+    canvas.setAttribute("height", h)
+    const context = canvas.getContext("2d")
+    //context.clearRect(0, 0, w, h);
+    context.drawImage(img_to_download, 0, 0, w, h)
+    const dataURL = canvas.toDataURL("image/png")
+    if (window.navigator.msSaveBlob) {
+      window.navigator.msSaveBlob(canvas.msToBlob(), "line_chart.png")
+      e.preventDefault()
+    } else {
+      const a = document.createElement("a")
+      const my_evt = new MouseEvent("click")
+      a.download = "line_chart.png"
+      a.href = dataURL
+      a.dispatchEvent(my_evt)
+    }
+    //canvas.parentNode.removeChild(canvas);
+  }
+}
+
 formElement.addEventListener("submit", (e) => {
   e.preventDefault()
   if (input.value == "") {
     return
   }
   values = formatInput(input.value.trim())
+  if (values.length < 2) {
+    return
+  }
+  if (svgPathContainer.childElementCount >= 1) {
+    svgPathContainer.removeChild(svgPathContainer.firstChild)
+    generateLineChart(values, 50, 5)
+  }
 })
 
+// Download Chart
+downloadAsSvg.addEventListener("click", (e) => {
+  downloadSVGAsText()
+})
+
+// downloadAsPng.addEventListener("click", (e) => {
+//   downloadSVGAsPNG()
+// })
+
 generateLineChart(values, 50, 5)

script.js

@@ -20,6 +20,27 @@ body {
   padding: 1rem;
 }
 
+h1 {
+  font-size: 1.5rem;
+}
+
+button {
+  cursor: pointer;
+}
+
+.btn {
+  padding: 0.5rem 0.75rem;
+  background-color: black;
+  color: white;
+  font-weight: 500;
+  font-size: 0.875rem;
+  border: 2px solid black;
+}
+
+.btn:hover {
+  background-color: #232323;
+}
+
 svg {
   display: block;
   max-width: 100%;
@@ -61,3 +82,20 @@ g.graph-text {
   text-anchor: middle;
   font-size: 1rem;
 }
+
+#real {
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 2px solid lightgray;
+}
+
+.btn-download-chart-as-svg,
+.btn-download-chart-as-png {
+  margin-top: 1rem;
+}
+
+@media only screen and (min-width: 600px) {
+  h1 {
+    font-size: 1.875rem;
+  }
+}