Sub vs Blocks in Perl6 - aka Roman Numbers Challenge - raku

The Perl Weekly Challenge Number 10 asks us to write an implementation to parse Roman Numbers.
My solution uses reduce. My attempt with a Subroutine works but with a Block it isn't working. What is the difference that makes it failing?
use Test;
my %roman2num =
'I' => 1,
'V' => 5,
'X' => 10,
'L' => 50,
'C' => 100,
'D' => 500,
'M' => 1000;
for test-data().kv -> $roman, $number {
my $r;
$r = $roman.comb().reverse.map({%roman2num{$_}}).reduce(
sub ($sum, $b) {
state $last = $sum;
LEAVE { $last = $b };
return $sum + (($last <= $b)*2-1) * $b;
}
);
is $r, $number, "Roman $roman $r- way 1";
$r = $roman.comb().reverse.map({%roman2num{$_}}).reduce({
state $last = $^sum;
$^b;
LEAVE { $last = $b };
$sum + (($last <= $b)*2-1) * $b;
});
is $r, $number, "Roman $roman $r- way 2";
}
done-testing;
sub test-data {
return (
I => 1,
II => 2,
III => 3,
IV => 4,
V => 5,
VI => 6,
VII => 7,
VIII => 8,
IX => 9,
X => 10,
XI => 11,
XII => 12,
XIII => 13,
XIV => 14,
XV => 15,
XVI => 16,
XVII => 17,
XVIII => 18,
XIX => 19,
XX => 20,
XXI => 21,
XXII => 22,
XXIII => 23,
XXIV => 24,
XXV => 25,
XXVI => 26,
XXVII => 27,
XXVIII => 28,
XXIX => 29,
XXX => 30,
XXXI => 31,
XXXII => 32,
XXXIII => 33,
XXXIV => 34,
XXXV => 35,
XXXVI => 36,
XXXVII => 37,
XXXVIII => 38,
XXXIX => 39,
XL => 40,
XLI => 41,
XLII => 42,
XLIII => 43,
XLIV => 44,
XLV => 45,
XLVI => 46,
XLVII => 47,
XLVIII => 48,
XLIX => 49,
L => 50,
LI => 51,
LII => 52,
LIII => 53,
LIV => 54,
LV => 55,
LVI => 56,
LVII => 57,
LVIII => 58,
LIX => 59,
LX => 60,
LXI => 61,
LXII => 62,
LXIII => 63,
LXIV => 64,
LXV => 65,
LXVI => 66,
LXVII => 67,
LXVIII => 68,
LXIX => 69,
LXX => 70,
LXXI => 71,
LXXII => 72,
LXXIII => 73,
LXXIV => 74,
LXXV => 75,
LXXVI => 76,
LXXVII => 77,
LXXVIII => 78,
LXXIX => 79,
LXXX => 80,
LXXXI => 81,
LXXXII => 82,
LXXXIII => 83,
LXXXIV => 84,
LXXXV => 85,
LXXXVI => 86,
LXXXVII => 87,
LXXXVIII => 88,
LXXXIX => 89,
XC => 90,
XCI => 91,
XCII => 92,
XCIII => 93,
XCIV => 94,
XCV => 95,
XCVI => 96,
XCVII => 97,
XCVIII => 98,
XCIX => 99,
C => 100,
CI => 101,
CII => 102,
CIII => 103,
CIV => 104,
CV => 105,
CVI => 106,
CVII => 107,
CVIII => 108,
CIX => 109,
CX => 110,
CXI => 111,
CXII => 112,
CXIII => 113,
CXIV => 114,
CXV => 115,
CXVI => 116,
CXVII => 117,
CXVIII => 118,
CXIX => 119,
CXX => 120,
CXXI => 121,
CXXII => 122,
CXXIII => 123,
CXXIV => 124,
CXXV => 125,
CXXVI => 126,
CXXVII => 127,
CXXVIII => 128,
CXXIX => 129,
CXXX => 130,
CXXXI => 131,
CXXXII => 132,
CXXXIII => 133,
CXXXIV => 134,
CXXXV => 135,
CXXXVI => 136,
CXXXVII => 137,
CXXXVIII => 138,
CXXXIX => 139,
CXL => 140,
CXLI => 141,
CXLII => 142,
CXLIII => 143,
CXLIV => 144,
CXLV => 145,
CXLVI => 146,
CXLVII => 147,
CXLVIII => 148,
CXLIX => 149,
CL => 150,
CLI => 151,
CLII => 152,
CLIII => 153,
CLIV => 154,
CLV => 155,
CLVI => 156,
CLVII => 157,
CLVIII => 158,
CLIX => 159,
CLX => 160,
CLXI => 161,
CLXII => 162,
CLXIII => 163,
CLXIV => 164,
CLXV => 165,
CLXVI => 166,
CLXVII => 167,
CLXVIII => 168,
CLXIX => 169,
CLXX => 170,
CLXXI => 171,
CLXXII => 172,
CLXXIII => 173,
CLXXIV => 174,
CLXXV => 175,
CLXXVI => 176,
CLXXVII => 177,
CLXXVIII => 178,
CLXXIX => 179,
CLXXX => 180,
CLXXXI => 181,
CLXXXII => 182,
CLXXXIII => 183,
CLXXXIV => 184,
CLXXXV => 185,
CLXXXVI => 186,
CLXXXVII => 187,
CLXXXVIII => 188,
CLXXXIX => 189,
CXC => 190,
CXCI => 191,
CXCII => 192,
CXCIII => 193,
CXCIV => 194,
CXCV => 195,
CXCVI => 196,
CXCVII => 197,
CXCVIII => 198,
CXCIX => 199,
CC => 200,
CCI => 201,
CCII => 202,
CCIII => 203,
CCIV => 204,
CCV => 205,
CCVI => 206,
CCVII => 207,
CCVIII => 208,
CCIX => 209,
CCX => 210,
CCXI => 211,
CCXII => 212,
CCXIII => 213,
CCXIV => 214,
CCXV => 215,
CCXVI => 216,
CCXVII => 217,
CCXVIII => 218,
CCXIX => 219,
CCXX => 220,
CCXXI => 221,
CCXXII => 222,
CCXXIII => 223,
CCXXIV => 224,
CCXXV => 225,
CCXXVI => 226,
CCXXVII => 227,
CCXXVIII => 228,
CCXXIX => 229,
CCXXX => 230,
CCXXXI => 231,
CCXXXII => 232,
CCXXXIII => 233,
CCXXXIV => 234,
CCXXXV => 235,
CCXXXVI => 236,
CCXXXVII => 237,
CCXXXVIII => 238,
CCXXXIX => 239,
CCXL => 240,
CCXLI => 241,
CCXLII => 242,
CCXLIII => 243,
CCXLIV => 244,
CCXLV => 245,
CCXLVI => 246,
CCXLVII => 247,
CCXLVIII => 248,
CCXLIX => 249,
CCL => 250,
CCLI => 251,
CCLII => 252,
CCLIII => 253,
CCLIV => 254,
CCLV => 255,
CCLVI => 256,
CCLVII => 257,
CCLVIII => 258,
CCLIX => 259,
CCLX => 260,
CCLXI => 261,
CCLXII => 262,
CCLXIII => 263,
CCLXIV => 264,
CCLXV => 265,
CCLXVI => 266,
CCLXVII => 267,
CCLXVIII => 268,
CCLXIX => 269,
CCLXX => 270,
CCLXXI => 271,
CCLXXII => 272,
CCLXXIII => 273,
CCLXXIV => 274,
CCLXXV => 275,
CCLXXVI => 276,
CCLXXVII => 277,
CCLXXVIII => 278,
CCLXXIX => 279,
CCLXXX => 280,
CCLXXXI => 281,
CCLXXXII => 282,
CCLXXXIII => 283,
CCLXXXIV => 284,
CCLXXXV => 285,
CCLXXXVI => 286,
CCLXXXVII => 287,
CCLXXXVIII => 288,
CCLXXXIX => 289,
CCXC => 290,
CCXCI => 291,
CCXCII => 292,
CCXCIII => 293,
CCXCIV => 294,
CCXCV => 295,
CCXCVI => 296,
CCXCVII => 297,
CCXCVIII => 298,
CCXCIX => 299,
CCC => 300,
CCCI => 301,
CCCII => 302,
CCCIII => 303,
CCCIV => 304,
CCCV => 305,
CCCVI => 306,
CCCVII => 307,
CCCVIII => 308,
CCCIX => 309,
CCCX => 310,
CCCXI => 311,
CCCXII => 312,
CCCXIII => 313,
CCCXIV => 314,
CCCXV => 315,
CCCXVI => 316,
CCCXVII => 317,
CCCXVIII => 318,
CCCXIX => 319,
CCCXX => 320,
CCCXXI => 321,
CCCXXII => 322,
CCCXXIII => 323,
CCCXXIV => 324,
CCCXXV => 325,
CCCXXVI => 326,
CCCXXVII => 327,
CCCXXVIII => 328,
CCCXXIX => 329,
CCCXXX => 330,
CCCXXXI => 331,
CCCXXXII => 332,
CCCXXXIII => 333,
CCCXXXIV => 334,
CCCXXXV => 335,
CCCXXXVI => 336,
CCCXXXVII => 337,
CCCXXXVIII => 338,
CCCXXXIX => 339,
CCCXL => 340,
CCCXLI => 341,
CCCXLII => 342,
CCCXLIII => 343,
CCCXLIV => 344,
CCCXLV => 345,
CCCXLVI => 346,
CCCXLVII => 347,
CCCXLVIII => 348,
CCCXLIX => 349,
CCCL => 350,
CCCLI => 351,
CCCLII => 352,
CCCLIII => 353,
CCCLIV => 354,
CCCLV => 355,
CCCLVI => 356,
CCCLVII => 357,
CCCLVIII => 358,
CCCLIX => 359,
CCCLX => 360,
CCCLXI => 361,
CCCLXII => 362,
CCCLXIII => 363,
CCCLXIV => 364,
CCCLXV => 365,
CCCLXVI => 366,
CCCLXVII => 367,
CCCLXVIII => 368,
CCCLXIX => 369,
CCCLXX => 370,
CCCLXXI => 371,
CCCLXXII => 372,
CCCLXXIII => 373,
CCCLXXIV => 374,
CCCLXXV => 375,
CCCLXXVI => 376,
CCCLXXVII => 377,
CCCLXXVIII => 378,
CCCLXXIX => 379,
CCCLXXX => 380,
CCCLXXXI => 381,
CCCLXXXII => 382,
CCCLXXXIII => 383,
CCCLXXXIV => 384,
CCCLXXXV => 385,
CCCLXXXVI => 386,
CCCLXXXVII => 387,
CCCLXXXVIII => 388,
CCCLXXXIX => 389,
CCCXC => 390,
CCCXCI => 391,
CCCXCII => 392,
CCCXCIII => 393,
CCCXCIV => 394,
CCCXCV => 395,
CCCXCVI => 396,
CCCXCVII => 397,
CCCXCVIII => 398,
CCCXCIX => 399,
CD => 400,
CDI => 401,
CDII => 402,
CDIII => 403,
CDIV => 404,
CDV => 405,
CDVI => 406,
CDVII => 407,
CDVIII => 408,
CDIX => 409,
CDX => 410,
CDXI => 411,
CDXII => 412,
CDXIII => 413,
CDXIV => 414,
CDXV => 415,
CDXVI => 416,
CDXVII => 417,
CDXVIII => 418,
CDXIX => 419,
CDXX => 420,
CDXXI => 421,
CDXXII => 422,
CDXXIII => 423,
CDXXIV => 424,
CDXXV => 425,
CDXXVI => 426,
CDXXVII => 427,
CDXXVIII => 428,
CDXXIX => 429,
CDXXX => 430,
CDXXXI => 431,
CDXXXII => 432,
CDXXXIII => 433,
CDXXXIV => 434,
CDXXXV => 435,
CDXXXVI => 436,
CDXXXVII => 437,
CDXXXVIII => 438,
CDXXXIX => 439,
CDXL => 440,
CDXLI => 441,
CDXLII => 442,
CDXLIII => 443,
CDXLIV => 444,
CDXLV => 445,
CDXLVI => 446,
CDXLVII => 447,
CDXLVIII => 448,
CDXLIX => 449,
CDL => 450,
CDLI => 451,
CDLII => 452,
CDLIII => 453,
CDLIV => 454,
CDLV => 455,
CDLVI => 456,
CDLVII => 457,
CDLVIII => 458,
CDLIX => 459,
CDLX => 460,
CDLXI => 461,
CDLXII => 462,
CDLXIII => 463,
CDLXIV => 464,
CDLXV => 465,
CDLXVI => 466,
CDLXVII => 467,
CDLXVIII => 468,
CDLXIX => 469,
CDLXX => 470,
CDLXXI => 471,
CDLXXII => 472,
CDLXXIII => 473,
CDLXXIV => 474,
CDLXXV => 475,
CDLXXVI => 476,
CDLXXVII => 477,
CDLXXVIII => 478,
CDLXXIX => 479,
CDLXXX => 480,
CDLXXXI => 481,
CDLXXXII => 482,
CDLXXXIII => 483,
CDLXXXIV => 484,
CDLXXXV => 485,
CDLXXXVI => 486,
CDLXXXVII => 487,
CDLXXXVIII => 488,
CDLXXXIX => 489,
CDXC => 490,
CDXCI => 491,
CDXCII => 492,
CDXCIII => 493,
CDXCIV => 494,
CDXCV => 495,
CDXCVI => 496,
CDXCVII => 497,
CDXCVIII => 498,
CDXCIX => 499,
).Hash
}

The placeholder variables are sorted in Unicode order ^ twigil . Rename the second variable:
$r = $roman.comb().reverse.map({%roman2num{$_}}).reduce({
state $last = $^sum;
$^x;
LEAVE { $last = $x };
$sum + (($last <= $x)*2-1) * $x;
});
is $r, $number, "Roman $roman $r- way 2";
Or define the variable in the block signature:
$r = $roman.comb().reverse.map({%roman2num{$_}}).reduce( -> $sum, $b {
state $last = $sum;
$b;
LEAVE { $last = $b };
$sum + (($last <= $b)*2-1) * $b;
});
is $r, $number, "Roman $roman $r- way 2";

Related

Put array in chart data

I use vue3-chart-v2 in my Vue3 app.
I would like to put array instead of predefined numbers.
Can anybody help me?
This is my chart component:
<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'
export default defineComponent({
name: 'ChanceChart',
extends: Line,
props: {
chartData: {
type: Object,
required: true
},
chartOptions: {
type: Object,
required: false
},
},
mounted () {
this.renderChart(this.chartData, this.chartOptions)
}
})
</script>
And this is how it looks like in the app:
<template>
<Navigation />
<div>
<ChanceChart :chartData="state.chartData"/>
</div>
</template>
<script>
import ChanceChart from '../components/ChanceChart.vue';
export default {
components: {
ChanceChart
},
data() {
return {
enemysCards : [1610, 169, 168, 167, 330, 329, 328, 327, 326, 325, 324, 323, 1, 1610, 1600, 169, 168, 167, 1610, 1600, 169, 168, 167, 11],
state: {
chartData: {
datasets: [
{
label: "Enemy's Chance",
borderColor: '#1161ed',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190]
},
{
label: 'My Chance',
borderColor: '#f87979',
color: '#fff',
data: [60,60,60,60,60,60,60,60,60,60,60,60, 60]
}
],
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
},
chartOptions: {
responsive: true
}
}
}
}
For example i want to take the enemysCards array in the data and the enemysCards.lenght in the labels.
Use computed properties instead of data property :
export default {
components: {
ChanceChart
},
computed: {
chartData(){
return {
datasets: [
{
label: "Enemy's Chance",
borderColor: '#1161ed',
data: this.myFirstArray // <- here
},
{
label: 'My Chance',
borderColor: '#f87979',
color: '#fff',
data: this.mySecondArray // <- here
}
],
labels: this.ennemyCards.map((x, index) => index + 1) // here you can calculate your labels
},
chartOptions: {
responsive: true
}
}
}
data() {
return {
enemysCards : [1610, 169, 168, 167, 330, 329, 328, 327, 326, 325, 324, 323, 1, 1610, 1600, 169, 168, 167, 1610, 1600, 169, 168, 167, 11],
myFirstArray: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190],
mySecondArray: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190],
}
}

How can I set up a proxy to get the requests from selenium using Browsermob::Proxy in perl?

I have been the whole day working on this and this and I got a little bit frustrated for not being able to make it work.
I started using a standalone selenium server as follows:
java -Dwebdriver.chrome.driver="C:\some_path\chromedriver.exe" -jar "C:\some_path\selenium-server-standalone-3.141.59.jar"
Then I downloaded the browsermob-proxy-2.1.4 and just executed the ./bin/browsermob-proxy.bat
Then I battled for some hours to find the properties in chrome that would not complain because I am using a proxy and showed the exception NET::ERR_CERT_AUTHORITY_INVALID:
So I ended up with this code:
use strict;
use warnings;
use Data::Dumper;
use Browsermob::Proxy;
use Browsermob::Server;
use Selenium::Remote::Driver;
use Selenium::Waiter qw/wait_until/;
my $server = Browsermob::Server->new(
server_port => 8080
);
my $proxy = $server->create_proxy;
my $driver = Selenium::Remote::Driver->new('browser_name' =>'chrome',
proxy => $proxy->selenium_proxy(1),
'extra_capabilities' => {
'goog:chromeOptions' => {
'args' => [
'ignore-ssl-errors=yes',
'proxy-auto-detect',
],
'prefs' => {
'profile' => {
'accept_ssl_certs' => 'true',
'accept_insecure_certs' => 'true',
},
'session' => {
'restore_on_startup' => 4,
'urls_to_restore_on_startup' => [
'http://www.google.com',
'http://docs.seleniumhq.org'
]},
'first_run_tabs' => [
'http://www.google.com',
'http://docs.seleniumhq.org'
]
}
}
});
$proxy->create_new_har(
payload => {
initialPageRef => 'payload is optional'
},
captureHeaders => 'true',
captureContent => 'true',
captureBinaryContent => 'true'
);
print("Getting stackoverflow\n");
wait_until{$driver->get("https://www.stackoverflow.com")};
validate_site($driver);
sleep(20);
$driver->quit;
sub validate_site{
my ($driver) = #_;
print "Har:\n";
print Dumper($proxy->har);
}
But now I just get the following output, which looks like if the proxy would not capture anything:
Getting stackoverflow
Har:
$VAR1 = {
'log' => {
'creator' => {
'version' => '2.1.4',
'name' => 'BrowserMob Proxy',
'comment' => ''
},
'entries' => [],
'version' => '1.2',
'comment' => '',
'pages' => [
{
'comment' => '',
'pageTimings' => {
'comment' => ''
},
'startedDateTime' => '2020-10-01T18:21:20.171+02:00',
'id' => 'Page 0',
'title' => 'Page 0'
}
]
}
};
What is funny, is that if I comment the line autodected proxy, I get the following:
Getting stackoverflow
Har:
$VAR1 = {
'log' => {
'pages' => [
{
'comment' => '',
'id' => 'Page 0',
'title' => 'Page 0',
'startedDateTime' => '2020-10-01T18:19:15.850+02:00',
'pageTimings' => {
'comment' => ''
}
}
],
'entries' => [
{
'serverIPAddress' => 'some_ip',
'startedDateTime' => '2020-10-01T18:19:15.900+02:00',
'response' => {
'comment' => '',
'status' => 0,
'headers' => [],
'content' => {
'comment' => '',
'size' => 0,
'mimeType' => ''
},
'bodySize' => -1,
'statusText' => '',
'cookies' => [],
'redirectURL' => '',
'httpVersion' => 'unknown',
'_error' => 'Unable to connect to host',
'headersSize' => -1
},
'pageref' => 'Page 0',
'timings' => {
'connect' => 257,
'wait' => 0,
'ssl' => -1,
'receive' => 0,
'send' => 0,
'blocked' => 0,
'comment' => '',
'dns' => 0
},
'time' => 258,
'request' => {
'comment' => '',
'queryString' => [],
'cookies' => [],
'headers' => [],
'headersSize' => 0,
'bodySize' => 0,
'url' => 'https://www.stackoverflow.com',
'method' => 'CONNECT',
'httpVersion' => 'HTTP/1.1'
},
'cache' => {},
'comment' => ''
},
{
'time' => 258,
'cache' => {},
'request' => {
'httpVersion' => 'HTTP/1.1',
'bodySize' => 0,
'headersSize' => 0,
'url' => 'https://www.stackoverflow.com',
'method' => 'CONNECT',
'headers' => [],
'cookies' => [],
'comment' => '',
'queryString' => []
},
'comment' => '',
'serverIPAddress' => 'some_ip',
'response' => {
'_error' => 'Unable to connect to host',
'headersSize' => -1,
'httpVersion' => 'unknown',
'cookies' => [],
'redirectURL' => '',
'content' => {
'size' => 0,
'comment' => '',
'mimeType' => ''
},
'bodySize' => -1,
'statusText' => '',
'headers' => [],
'status' => 0,
'comment' => ''
},
'startedDateTime' => '2020-10-01T18:19:15.900+02:00',
'pageref' => 'Page 0',
'timings' => {
'dns' => 0,
'blocked' => 0,
'comment' => '',
'receive' => 0,
'send' => 0,
'connect' => 257,
'wait' => 0,
'ssl' => -1
}
},
{
'cache' => {},
'request' => {
'cookies' => [],
'comment' => '',
'queryString' => [],
'httpVersion' => 'HTTP/1.1',
'bodySize' => 0,
'headersSize' => 344,
'url' => 'http://www.gstatic.com/generate_204',
'method' => 'GET',
'headers' => [
{
'name' => 'Host',
'value' => 'www.gstatic.com'
},
{
'name' => 'Proxy-Connection',
'value' => 'keep-alive'
},
{
'value' => 'no-cache',
'name' => 'Pragma'
},
{
'name' => 'Cache-Control',
'value' => 'no-cache'
},
{
'value' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36',
'name' => 'User-Agent'
},
{
'name' => 'Accept-Encoding',
'value' => 'gzip, deflate'
},
{
'value' => 'en-US,en;q=0.9',
'name' => 'Accept-Language'
}
]
},
'time' => 161,
'comment' => '',
'serverIPAddress' => 'some_ip',
'timings' => {
'connect' => 46,
'ssl' => -1,
'wait' => 21,
'receive' => 38,
'send' => 1,
'blocked' => 0,
'comment' => '',
'dns' => 53
},
'startedDateTime' => '2020-10-01T18:19:16.176+02:00',
'response' => {
'cookies' => [],
'redirectURL' => '',
'comment' => '',
'status' => 204,
'headers' => [
{
'name' => 'Content-Length',
'value' => '0'
},
{
'value' => 'Thu, 01 Oct 2020 16:19:16 GMT',
'name' => 'Date'
}
],
'httpVersion' => 'HTTP/1.1',
'content' => {
'comment' => '',
'size' => 0,
'encoding' => 'base64',
'text' => '',
'mimeType' => ''
},
'bodySize' => 0,
'statusText' => 'No Content',
'headersSize' => 85
},
'pageref' => 'Page 0'
}
],
'creator' => {
'name' => 'BrowserMob Proxy',
'comment' => '',
'version' => '2.1.4'
},
'version' => '1.2',
'comment' => ''
}
};
So although I get the exception in the browser and I can'T do anything with selenium it seems to work.
Anyone can give me a hint on what is going on?
Thank you!

How to assign mapState list of data?

Currently, I am working on apex bar chart, wanted to assign list of mapState data into apex series data.
Below is the code:
<script>
import { mapState } from 'vuex';
export default {
data: () => ({
series: [{
name: 'Completed',
data: [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
}, {
name: 'Total',
data: [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
}]
}),
computed: {
...mapState(['userAssignmentProgessTotal','userAssignmentProgessCompleted']),
},
}
</script>
mapState value:
userAssignmentProgessTotal: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
userAssignmentProgessCompleted: [45, 29, 32, 17, 1, 13, 12, 10, 8, 8, 8, 8]
And I wanted to assign like below:
series: [{
name: 'Completed',
data: this.userAssignmentProgessTotal
}, {
name: 'Total',
data: this.userAssignmentProgessCompleted
}]
but getting error as:
Error in data(): "TypeError: Cannot read property 'userAssignmentProgessTotal' of undefined"
I am very new to vuex as well as vuejs. Apologies if I haven't described well. Thanks
Screenshot:
[1] If you want the series to be reactive ie. keep changing / updating when
userAssignmentProgessTotal or userAssignmentProgessCompleted
changes, make series a computed property instead of data property
import { mapState } from 'vuex';
export default {
computed: {
...mapState([
'userAssignmentProgessTotal',
'userAssignmentProgessCompleted'
]),
series () {
return [{
name: 'Completed',
// If `userAssignmentProgessTotal` is any falsy value it will return the default array else will return `userAssignmentProgessTotal`
data: this.userAssignmentProgessTotal || [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
}, {
name: 'Total',
data: this.userAssignmentProgessCompleted || [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
}]
}
}
}
[2] If you want to manually update series, make a method to update
series
import { mapState } from 'vuex';
export default {
data () {
return {
series () {
return [{
name: 'Completed',
data: [44, 55, 57, 58, 56, 61, 58, 63, 60, 66, 67, 62]
}, {
name: 'Total',
data: [100, 90, 101, 100, 98, 87, 105, 97, 114, 94, 112, 100]
}]
}
}
},
computed: {
...mapState([
'userAssignmentProgessTotal',
'userAssignmentProgessCompleted'
])
},
methods: {
updateSeries () {
this.$set(this.series, 0, { name: this.series[0].name, data: this.userAssignmentProgessTotal })
this.$set(this.series, 1, { name: this.series[1].name, data: this.userAssignmentProgessCompleted })
}
},
mounted () {
// call dispatches to fetch data
// ...
// call the method in mounted to update series when component loads
// or else whenever you want to update series
this.updateSeries()
}
}

How can I for loop data in chart js with vue js

I want to for loop the labels and data so I'll never use this again labels: [this.transaction_per_day[0].Day... and data: [this.transaction_per_day[0].Amount.... I just realized when the user transacts on the next day, the data will not show in the bar graph. The problem is when I change the index into i inside the bracket instead of 0,1,2,3. It only displays the first index which is the 0. Can somebody help regarding my problem? Here's my code
retrieveTransactionPerDay : function() {
var self = this
axios.post(this.urlRoot + this.api + "retrieve_transaction_per_day.php")
.then(response => {
console.log(response);
vm.transaction_per_day = response.data
for(var i = 0; i < this.transaction_per_day.length; i++) {
var ctxChart = self.$refs.myChart.getContext('2d')
var myChart = new Chart(ctxChart, {
type: 'bar',
data: {
labels: [this.transaction_per_day[0].Day, this.transaction_per_day[1].Day, this.transaction_per_day[2].Day, this.transaction_per_day[3].Day],
datasets: [{
label: 'Transaction per day',
data: [this.transaction_per_day[0].Amount, this.transaction_per_day[1].Amount, this.transaction_per_day[2].Amount, this.transaction_per_day[3].Amount],
backgroundColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
},
options: {
title : {
display : true,
text : "TRANSACTION GRAPH",
fontFamily: "sans-serif",
fontSize: 18
},
}
});
}
}).catch(e => {
console.log(e)
});
},
You can remove the for loop and use Array.map to get the label and data
vm.transaction_per_day = response.data
var myChart = new Chart(ctxChart, {
type: 'bar',
data: {
labels: vm.transaction_per_day.map(item => item.Day),
datasets: [{
label: 'Transaction per day',
data: vm.transaction_per_day.map(item => item.Amount),
backgroundColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: "TRANSACTION GRAPH",
fontFamily: "sans-serif",
fontSize: 18
},
}
});

Pulling specific values from large maps

I have a very large map and I'm trying to get data from it but I'm not sure how to access the values that I want.
MAP
%{"attendance" => 20562,
"away" => %{"id" => "583ecb8f-fb46-11e1-82cb-f4ce4684ea4c",
"leaders" => %{"assists" => [%{"full_name" => "Dennis Schroder",
"id" => "a2c6a907-282f-4172-9d60-42d03987da0e",
"jersey_number" => "17", "position" => "G", "primary_position" => "PG",
"statistics" => %{"assists" => 6, "assists_turnover_ratio" => 1.5,
"blocked_att" => 1, "blocks" => 0, "defensive_rebounds" => 1,
"field_goals_att" => 16, "field_goals_made" => 10,
"field_goals_pct" => 62.5, "flagrant_fouls" => 0,
"free_throws_att" => 5, "free_throws_made" => 5,
"free_throws_pct" => 100.0, "minutes" => "32:09",
"offensive_rebounds" => 1, "personal_fouls" => 3, "pls_min" => 3,
"points" => 28, "rebounds" => 2, "steals" => 0, "tech_fouls" => 1,
"three_points_att" => 6, "three_points_made" => 3,
"three_points_pct" => 50.0, "turnovers" => 4, "two_points_att" => 10,
"two_points_made" => 7, "two_points_pct" => 70.0}}],
"points" => [%{"full_name" => "Dennis Schroder",
"id" => "a2c6a907-282f-4172-9d60-42d03987da0e",
"jersey_number" => "17", "position" => "G", "primary_position" => "PG",
"statistics" => %{"assists" => 6, "assists_turnover_ratio" => 1.5,
"blocked_att" => 1, "blocks" => 0, "defensive_rebounds" => 1,
"field_goals_att" => 16, "field_goals_made" => 10,
"field_goals_pct" => 62.5, "flagrant_fouls" => 0,
"free_throws_att" => 5, "free_throws_made" => 5,
"free_throws_pct" => 100.0, "minutes" => "32:09",
"offensive_rebounds" => 1, "personal_fouls" => 3, "pls_min" => 3,
"points" => 28, "rebounds" => 2, "steals" => 0, "tech_fouls" => 1,
"three_points_att" => 6, "three_points_made" => 3,
"three_points_pct" => 50.0, "turnovers" => 4, "two_points_att" => 10,
"two_points_made" => 7, "two_points_pct" => 70.0}}],
"rebounds" => [%{"full_name" => "Dwight Howard",
"id" => "ae8df356-5e57-43e7-be4d-5ec7663312bd", "jersey_number" => "8",
"position" => "C", "primary_position" => "C",
"statistics" => %{"assists" => 2, "assists_turnover_ratio" => 0.67,
"blocked_att" => 0, "blocks" => 3, "defensive_rebounds" => 15,
"field_goals_att" => 5, "field_goals_made" => 3,
"field_goals_pct" => 60.0, "flagrant_fouls" => 0,
"free_throws_att" => 4, "free_throws_made" => 1,
"free_throws_pct" => 25.0, "minutes" => "26:59",
"offensive_rebounds" => 2, "personal_fouls" => 4, "pls_min" => 3,
"points" => 7, "rebounds" => 17, "steals" => 0, "tech_fouls" => 0,
"three_points_att" => 0, "three_points_made" => 0,
"three_points_pct" => 0.0, "turnovers" => 3, "two_points_att" => 5,
"two_points_made" => 3, "two_points_pct" => 60.0}}]},
"market" => "Atlanta", "name" => "Hawks", "points" => 110,
"scoring" => [%{"number" => 1, "points" => 20, "sequence" => 1,
"type" => "quarter"},
%{"number" => 2, "points" => 33, "sequence" => 2, "type" => "quarter"},
%{"number" => 3, "points" => 31, "sequence" => 3, "type" => "quarter"},
%{"number" => 4, "points" => 26, "sequence" => 4, "type" => "quarter"}]},
"clock" => "00:00", "coverage" => "full", "duration" => "2:16",
"home" => %{"id" => "583ec773-fb46-11e1-82cb-f4ce4684ea4c",
"leaders" => %{"assists" => [%{"full_name" => "LeBron James",
"id" => "0afbe608-940a-4d5d-a1f7-468718c67d91",
"jersey_number" => "23", "position" => "F", "primary_position" => "SF",
"statistics" => %{"assists" => 5, "assists_turnover_ratio" => 5.0,
"blocked_att" => 1, "blocks" => 0, "defensive_rebounds" => 7,
"field_goals_att" => 17, "field_goals_made" => 8,
"field_goals_pct" => 47.1, "flagrant_fouls" => 0,
"free_throws_att" => 5, "free_throws_made" => 5,
"free_throws_pct" => 100.0, "minutes" => "36:52",
"offensive_rebounds" => 2, "personal_fouls" => 3, "pls_min" => 7,
"points" => 23, "rebounds" => 9, "steals" => 3, "tech_fouls" => 0,
"three_points_att" => 5, "three_points_made" => 2,
"three_points_pct" => 40.0, "turnovers" => 1, "two_points_att" => 12,
"two_points_made" => 6, "two_points_pct" => 50.0}}],
"points" => [%{"full_name" => "Kyrie Irving",
"id" => "dd146010-902b-4ad7-b98c-650d0363a2f0", "jersey_number" => "2",
"position" => "G", "primary_position" => "PG",
"statistics" => %{"assists" => 4, "assists_turnover_ratio" => 0,
"blocked_att" => 0, "blocks" => 1, "defensive_rebounds" => 1,
"field_goals_att" => 27, "field_goals_made" => 11,
"field_goals_pct" => 40.7, "flagrant_fouls" => 0,
"free_throws_att" => 7, "free_throws_made" => 6,
"free_throws_pct" => 85.7, "minutes" => "39:28",
"offensive_rebounds" => 0, "personal_fouls" => 3, "pls_min" => -4,
"points" => 29, "rebounds" => 1, "steals" => 0, "tech_fouls" => 0,
"three_points_att" => 7, "three_points_made" => 1,
"three_points_pct" => 14.3, "turnovers" => 0, "two_points_att" => 20,
"two_points_made" => 10, "two_points_pct" => 50.0}}],
"rebounds" => [%{"full_name" => "Kevin Love",
"id" => "7d615ccd-db96-42a3-9a6c-7f18ea25634e", "jersey_number" => "0",
"position" => "F", "primary_position" => "PF",
"statistics" => %{"assists" => 3, "assists_turnover_ratio" => 1.5,
"blocked_att" => 2, "blocks" => 0, "defensive_rebounds" => 6,
"field_goals_att" => 17, "field_goals_made" => 7,
"field_goals_pct" => 41.2, "flagrant_fouls" => 0,
"free_throws_att" => 11, "free_throws_made" => 10,
"free_throws_pct" => 90.9, "minutes" => "38:10",
"offensive_rebounds" => 6, "personal_fouls" => 4, "pls_min" => -8,
"points" => 24, "rebounds" => 12, "steals" => 3, "tech_fouls" => 0,
"three_points_att" => 4, "three_points_made" => 0,
"three_points_pct" => 0.0, "turnovers" => 2, "two_points_att" => 13,
"two_points_made" => 7, "two_points_pct" => 53.846}}]},
"market" => "Cleveland", "name" => "Cavaliers", "points" => 106,
"scoring" => [%{"number" => 1, "points" => 20, "sequence" => 1,
"type" => "quarter"},
%{"number" => 2, "points" => 22, "sequence" => 2, "type" => "quarter"},
%{"number" => 3, "points" => 37, "sequence" => 3, "type" => "quarter"},
%{"number" => 4, "points" => 27, "sequence" => 4, "type" => "quarter"}]},
"id" => "35a64e45-75f1-4d7e-a855-37e9051733fc", "lead_changes" => 12,
"neutral_site" => false, "quarter" => 4,
"scheduled" => "2016-11-09T00:00:00+00:00", "status" => "closed",
"times_tied" => 7}
if you take the time to read this map, I'm trying to get the "leaders" full name vaule from it. Here is what I've tried unsuccessfully.
<%= for boxscore <- #boxscore do %>
<td><%= boxscore["away"]["leaders"]["points"] %></td>
<% end %>
That return this error:
no function clause matching in Access.get/3
Again how can I pull the leader values from this map?
Is this map a #boxscore or a boxscore? I tested it in IEx and it does fine, I mean - the boxscore["away"]["leaders"]["points"] does what's expected:
[%{"full_name" => "Dennis Schroder",
"id" => "a2c6a907-282f-4172-9d60-42d03987da0e", "jersey_number" => "17",
"position" => "G", "primary_position" => "PG",
"statistics" => %{"assists" => 6, "assists_turnover_ratio" => 1.5,
"blocked_att" => 1, "blocks" => 0, "defensive_rebounds" => 1,
"field_goals_att" => 16, "field_goals_made" => 10,
"field_goals_pct" => 62.5, "flagrant_fouls" => 0, "free_throws_att" => 5,
"free_throws_made" => 5, "free_throws_pct" => 100.0, "minutes" => "32:09",
"offensive_rebounds" => 1, "personal_fouls" => 3, "pls_min" => 3,
"points" => 28, "rebounds" => 2, "steals" => 0, "tech_fouls" => 1,
"three_points_att" => 6, "three_points_made" => 3,
"three_points_pct" => 50.0, "turnovers" => 4, "two_points_att" => 10,
"two_points_made" => 7, "two_points_pct" => 70.0}}]
Maybe you are trying to go through the #boxscore, which as a map, not a list. Hence you iterate over the {key, value} pairs, so
for boxscore <- #boxscore do
boxscore["away"]["leaders"]["points"]
end
will return ** (FunctionClauseError) no function clause matching in Access.get/3, because eg. #boxscore["attendance"] is an integer, so Access.get/3 will not find clause for that case and return the error from above.
Simply try to do access #boxscore["away"]["leaders"]["points"] - or even better - use Kernel.get_in/2:
get_in(#boxscore, ["away", "leaders", "points"])