Add Dates section

index.html

@@ -255,13 +255,19 @@ <h2>Dates</h2>
 
 <p>
   <input type="button" class="btn btn-date" value="date" onclick="date();" />
+  <input type="button" class="btn btn-date" value="date difference" onclick="dateDiff();" />
 </p>
 
 <p>
   <input class="btn" name="dateColumn" id="dateColumn" placeholder="date column" size="12" type="textfield" />
   <input class="btn" name="dateNewColumn" id="dateNewColumn" placeholder="new column" size="12" type="textfield" />
 </p>
 
+<p>
+  <input type="button" class="btn btn-date" value="parse date" onclick="parseDate();" />
+  <input type="button" class="btn btn-date" value="line plot" onclick="lineDate();" />
+</p>
+
 </div>
           </td>
 

script.js

@@ -302,6 +302,8 @@ const columnWrangleModify = (stat) => {
 }
 
 // Selection and indexing
+let selectionGrouping = document.getElementById("selectionGrouping");
+
 const individualSelection = () => {
   if (variable.value === "") {
     return alert("Please enter a variable name in the 'variable' field, in the 'Load data' section.");
@@ -503,3 +505,45 @@ const numberSelectionDoubleDiffIsIn = () => {
 
 // Dates
 let dateColumn = document.getElementById("dateColumn");
+
+const date = () => {
+  if (variable.value === "") {
+    return alert("Please enter a variable name in the 'variable' field, in the 'Load data' section.");
+  } else if (dateColumn.value === "") {
+      return alert("Please enter a date in the 'date column' field, in the 'Date' section.");
+  } else {
+      document.editor.textbox.value+="\n" + variable.value + "['" + dateColumn.value + "'] = " + variable.value + "[['Year', 'Month', 'Day']].apply(lambda x: '{}-{}-{}'.format(x[0], x[1], x[2]), axis=1)";
+  }
+}
+
+const dateDiff = () => {
+  if (variable.value === "") {
+    return alert("Please enter a variable name in the 'variable' field, in the 'Load data' section.");
+  } else if (dateNewColumn.value === '') {
+    return alert("Please enter a new column name in the 'new column' field, in the 'Date' section.");
+  } else if (dateColumn.value.split(",").length !== 2) {
+      return alert("Please enter two dates in the 'date column' field, in the 'Date' section.");
+  } else {
+      document.editor.textbox.value+="\n" + variable.value + "['" + dateNewColumn.value + "'] = " + variable.value + "[[" + dateColumn.value.split(',').map(el => `'${el.replace(' ', '')}'`) + "]].apply(lambda x: (x[1] - x[0]).days, axis=1)";
+  }
+}
+
+const parseDate = () => {
+  if (variable.value === "") {
+    return alert("Please enter a variable name in the 'variable' field, in the 'Load data' section.");
+  } else if (dateColumn.value === "") {
+      return alert("Please enter a date in the 'date column' field, in the 'Date' section.");
+  } else {
+      document.editor.textbox.value+="\n" + variable.value + "['" + dateColumn.value + "'] =  pd.to_datetime(" + variable.value + "['" + dateColumn.value + "'])";
+  }
+}
+
+const lineDate = () => {
+  if (variable.value === "") {
+    return alert("Please enter a variable name in the 'variable' field, in the 'Load data' section.");
+  } else if (dateColumn.value === '') {
+      return alert("Please enter a date in the 'date column' field, in the 'Date' section.");
+  } else {
+      document.editor.textbox.value+="\n" + variable.value + "['" + dateColumn.value + "'].value_counts().plot(kind='line', figsize=(14,6))";
+  }
+}

styles.css

@@ -95,6 +95,10 @@ td {
   border-color: chocolate;
 }
 
+.btn-primary, .btn-success, .btn-data {
+  color: white;
+}
+
 .hide {
   display: none;
 }
@@ -115,3 +119,7 @@ input {
 input:not([type:"button"]) {
   border-color: black;
 }
+
+#selectionPercentage {
+  width: 85px;
+}