Mix.install([
{:kino_jspreadsheet_ce, "~> 0.1.1"},
{:kino_vega_lite, "~> 0.1.13"},
{:explorer, "~> 0.11.1"}
])
Programmatic creation and data population
s1 = KinoJspreadsheetCe.new(
# toolbar: true,
columns: [
%{title: "Team"}, %{title: "TG"}, %{title: "W"}, %{title: "L"}, %{title: "SV"},
%{title: "G"}, %{title: "GS"}, %{title: "IP"}, %{title: "K/9"}, %{title: "BB/9"},
%{title: "HR/9"}, %{title: "BABIP"}, %{title: "LOB%"}, %{title: "GB%"},
%{title: "HR/FB"}, %{title: "vFA (pi)"}, %{title: "ERA"}, %{title: "xERA"},
%{title: "FIP"}, %{title: "xFIP"}, %{title: "WAR"}
],
data: [
["CLE", 646, 368, 278, 153, 2631, 646, 5775.2, 9.292, 2.647, 1.106, 0.294, 0.749, 0.445, 0.130, 93.582, 3.654, 3.784, 3.662, 3.610, 91.570],
["WSN", 648, 357, 291, 173, 2673, 648, 5787, 8.852, 2.821, 1.068, 0.291, 0.742, 0.433, 0.118, 93.840, 3.765, 3.732, 3.795, 3.913, 85.101],
["NYY", 648, 362, 286, 181, 2613, 648, 5791, 9.258, 2.978, 1.189, 0.293, 0.741, 0.458, 0.140, 95.040, 3.929, 3.820, 3.918, 3.747, 84.912],
["HOU", 648, 374, 274, 174, 2659, 648, 5810, 9.226, 2.839, 1.043, 0.294, 0.746, 0.460, 0.125, 93.607, 3.718, 3.592, 3.664, 3.678, 84.114],
["LAD", 649, 379, 270, 193, 2899, 649, 5819.1, 9.310, 2.665, 1.041, 0.287, 0.756, 0.452, 0.126, 93.147, 3.484, 3.380, 3.571, 3.575, 80.376],
["CHC", 649, 387, 261, 170, 2835, 649, 5844.2, 8.691, 3.200, 0.998, 0.278, 0.752, 0.462, 0.124, 92.855, 3.528, 3.874, 3.850, 3.875, 72.692],
["BOS", 648, 372, 276, 168, 2636, 648, 5829, 8.829, 3.003, 1.119, 0.299, 0.739, 0.423, 0.119, 93.577, 3.954, 3.998, 3.939, 4.041, 72.339],
["STL", 648, 357, 291, 186, 2755, 648, 5818.2, 8.209, 3.152, 0.942, 0.298, 0.744, 0.471, 0.115, 94.007, 3.718, 3.922, 3.856, 3.988, 67.240],
["NYM", 648, 324, 324, 180, 2740, 648, 5805, 8.609, 2.944, 1.099, 0.303, 0.732, 0.443, 0.123, 93.899, 4.026, 3.790, 3.911, 3.957, 67.027],
["PIT", 647, 333, 313, 181, 2654, 647, 5815, 7.999, 3.086, 1.000, 0.303, 0.736, 0.465, 0.120, 94.369, 3.916, 4.159, 3.984, 4.069, 59.984],
["PHI", 648, 280, 368, 155, 2758, 648, 5760, 8.166, 3.095, 1.244, 0.307, 0.714, 0.433, 0.131, 93.312, 4.511, 4.248, 4.286, 4.217, 58.217],
["TBR", 648, 318, 330, 207, 2727, 648, 5773, 8.551, 3.074, 1.157, 0.285, 0.739, 0.424, 0.121, 93.643, 3.916, 3.981, 4.038, 4.106, 57.661],
["COL", 649, 321, 328, 171, 2833, 649, 5745.2, 7.854, 3.419, 1.156, 0.310, 0.703, 0.476, 0.138, 93.740, 4.699, 4.283, 4.329, 4.191, 57.045],
["TOR", 648, 331, 317, 161, 2772, 648, 5799, 7.917, 3.039, 1.190, 0.293, 0.722, 0.445, 0.125, 92.265, 4.218, 4.128, 4.243, 4.263, 55.577],
["ARI", 648, 323, 325, 157, 2859, 648, 5822, 8.445, 3.310, 1.127, 0.300, 0.729, 0.467, 0.133, 93.305, 4.135, 4.288, 4.107, 4.024, 55.537],
["MIL", 649, 323, 326, 189, 2767, 649, 5776, 8.117, 3.358, 1.109, 0.295, 0.736, 0.453, 0.128, 93.082, 4.025, 4.152, 4.196, 4.178, 52.555],
["DET", 646, 288, 358, 151, 2679, 646, 5720.2, 7.471, 3.115, 1.273, 0.302, 0.702, 0.415, 0.124, 93.074, 4.709, 4.449, 4.480, 4.521, 51.637],
["OAK", 648, 309, 339, 149, 2730, 648, 5774.2, 7.490, 2.983, 1.170, 0.288, 0.710, 0.449, 0.125, 92.786, 4.289, 4.425, 4.280, 4.300, 49.721],
["SEA", 648, 329, 319, 193, 2697, 648, 5809, 8.015, 2.852, 1.280, 0.292, 0.732, 0.431, 0.133, 93.358, 4.185, 4.281, 4.297, 4.215, 49.365],
["CHW", 648, 283, 365, 139, 2616, 648, 5758, 7.942, 3.564, 1.227, 0.295, 0.721, 0.427, 0.125, 93.179, 4.430, 4.433, 4.494, 4.518, 48.716],
["SFG", 648, 308, 340, 152, 2831, 648, 5818, 7.699, 2.924, 1.007, 0.293, 0.730, 0.446, 0.110, 92.491, 3.969, 4.206, 3.966, 4.181, 48.476],
["BAL", 648, 292, 356, 160, 2526, 648, 5738.2, 7.711, 3.444, 1.306, 0.302, 0.723, 0.441, 0.136, 93.216, 4.608, 4.486, 4.592, 4.457, 47.216],
["MIN", 648, 305, 343, 150, 2787, 648, 5765.1, 7.462, 3.041, 1.258, 0.304, 0.714, 0.428, 0.127, 92.509, 4.566, 4.680, 4.443, 4.431, 46.991],
["KCR", 648, 314, 334, 169, 2634, 648, 5761.2, 7.529, 3.240, 1.190, 0.299, 0.729, 0.435, 0.121, 93.242, 4.380, 4.559, 4.388, 4.473, 46.271],
["TEX", 648, 328, 320, 172, 2595, 648, 5751, 7.006, 3.274, 1.264, 0.294, 0.714, 0.442, 0.131, 92.996, 4.565, 4.651, 4.647, 4.584, 45.666],
["LAA", 648, 319, 329, 153, 2837, 648, 5740, 7.926, 3.105, 1.259, 0.292, 0.743, 0.415, 0.126, 92.406, 4.143, 4.400, 4.365, 4.367, 43.345],
["ATL", 647, 297, 350, 159, 2849, 647, 5771, 7.885, 3.612, 1.079, 0.295, 0.714, 0.439, 0.117, 93.748, 4.346, 4.315, 4.288, 4.416, 40.038],
["SDP", 648, 279, 369, 157, 2726, 648, 5768, 8.331, 3.367, 1.194, 0.301, 0.712, 0.463, 0.140, 92.834, 4.411, 4.181, 4.275, 4.112, 38.641],
["MIA", 646, 290, 356, 154, 2817, 646, 5746.2, 7.802, 3.657, 1.062, 0.296, 0.717, 0.427, 0.112, 93.303, 4.418, 4.418, 4.304, 4.499, 35.667],
["CIN", 648, 267, 381, 134, 2701, 648, 5766.1, 7.884, 3.657, 1.422, 0.296, 0.718, 0.437, 0.152, 93.608, 4.768, 4.489, 4.807, 4.464, 25.771]
]
)
Edit the spreadsheet and reevaluate the cells
df1 = KinoJspreadsheetCe.get_config_from_js(s1)
|> KinoJspreadsheetCe.config_to_table_reader(false)
|> Explorer.DataFrame.new()
VegaLite.new(width: 700, height: 500)
|> VegaLite.data_from_values(df1, only: ["ERA", "WAR"])
|> VegaLite.mark(:point)
|> VegaLite.encode_field(:x, "ERA", type: :quantitative)
|> VegaLite.encode_field(:y, "WAR", type: :quantitative)
SmartCell creation
smartsheet = KinoJspreadsheetCe.new(min_dimensions: [7, 2], toolbar: false)
