While exploring the reference page of Google Studio Community Connectors, I came across this specific example:
{
"name": "Created",
"label": "Date Created",
"dataType": "STRING",
"semantics": {
"conceptType": "DIMENSION"
}
}
However, when attempting to implement this example, the field ends up as a string type in Google Data Studio, preventing me from utilizing it in any date-related charts.
New update as of December 14, 2017: You now have the ability to manually set semantic types with the new schema customization feature. Check out the reference for setting semantic types, as well as getSchema and SemanticType for more details. This should help resolve any issues you encounter.
Data Studio handles data types (such as number, string, boolean) and semantic types (like date, geo, etc) differently, as detailed here. To include dates in your charts:
string as the dataType for your date field.getData() calls with sampleExtraction set to true, choose one of the options for handling semantic type detection. If dealing with multiple rows or records, ensure none of them contain null values for the date field.By following these steps, the system will automatically recognize your field as a date during the fields selection process.
Dealing with dates turned into a nightmare for me
Upon deploying my code, all I saw were nulls instead of actual dates. Subsequent versions didn't resolve the issue, even after fixing the code.
I had no choice but to terminate the deployment and initiate a fresh one.
Below is an example code snippet for handling dates:
Schema
const created = fields.newDimension()
.setId('created')
.setName('created')
.setName('Created')
.setType(types.YEAR_MONTH_DAY_SECOND)
Data
/**
* @param {Object} responseRow - key-value pair obtained from API
* @param {DataStudioApp.Fields} requestedFields
*
* @returns {ConnectorGetDataRow}
*/
function getFormattedDataRow_(responseRow, requestedFields) {
const types = cc.FieldType;
if (responseRow === undefined) {
throw 'responseRow is undefined';
}
let row = [];
let value = null;
requestedFields.asArray().map((field) => {
value = responseRow[field.getId()];
if (value === null) {
value = '';
}
if (field.getType() === types.YEAR_MONTH_DAY_SECOND) {
value = formatDateToString_(new Date(value));
}
row.push(value);
});
return {
values: row
}
}
helper
/**
* @param {Date} date
*
* @returns {String}
*/
function formatDateToString_(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}${month}${day}${hours}${minutes}${seconds}`;
}
I have been working on making assertions with jest mocked functions, and here is the code I am using: const mockSaveProduct = jest.fn((product) => { //some logic return }); jest.mock('./db', () => ({ saveProduct: mockSaveProduct })); ...
When building a page with Vue.js or any other Javascript, the issue of temporary flash during loading on Chrome due to constructing latency can be quite frustrating. This delay is not caused by asynchronous ajax requests, but rather the processing involv ...
In the process of developing a collection of reusable components, I have utilized material-ui and styled them with CSS. One specific requirement is to dynamically set the width of a component through a prop passed into a custom button. My goal is to lever ...
When looking to update a specific element in an array within a MongoDB collection. Here is an example of some MongoDB data: { _id: new ObjectId("63608e3c3b74ed27b5bdf703"), placename: "khulna", frnds: [ { name: "osama&qu ...
I am working on creating a countdown timer using directives and want to add some CSS styles like fade-out when the time is changing. My issue lies in the HTML binding where the time is not updating visually, although it does change in the console. Here&ap ...
My plan is to create two separate files, vendor.js and app.js, for my project. In this setup, vendor.js will contain the core code for Webpack and Vue.js, while app.js will solely focus on the Vue.js code specific to my application. To streamline this proc ...
I'm facing a challenge in integrating the output of a bash script into an ExpressJS application to then send the data to a client. To address this, I have developed a simplified version of my actual script for testing purposes. My goal is to capture a ...
I am currently working with the material-ui datepicker and buttons. Whenever I click on the datepicker icon to select a date or any of the buttons, I notice a black border appearing. How can I remove this black border from the design? https://i.sstatic.ne ...
Has anyone successfully validated Google reCAPTCHA on localhost? I'm having issues getting it to work properly. Any recommendations for the best solution? ...
Here is some HTML content: <!---- HTML Content ----> <div class="container-fluid" ng-app="myApp"><br> <div class="row" ng-controller="mainController"> <div class="col-md-12"> <div class="panel pa ...
How can I create a vertical image that appears to 'swing' back and forth on my website? I am looking to incorporate an image of a rope swinging subtly in the background as a theme for my site's animation. Is there a way to achieve this effe ...
I am working with various objects and values in my code: const [validFilters, setValidFilters] = useState({}); const [endedEvents, setEndedEventsSort] = useState(false); const [joinedEvents, setJoinedEventsSort] = useState(true); const [startDate, setStart ...
Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...
I have a string that contains template interpolation along with words that are not inside the interpolation. The string can be in one of these various forms: foo{{bar}} {{foo}}bar foo{{bar}}baz {{foo}}{{bar}} foo {{foo}} {{foo}}bar{{baz}} The text interpo ...
I'm having trouble setting up Nativescript for developing iOS apps in Javascript. When I tried to install it using the command below: npm i -g nativescript I encountered the following error message: module.js:327 throw err; ^ Error: Cannot ...
In my code, I am able to retrieve the ngModel name, but now I am looking for a way to also capture the form's name that contains the element with the "validacion" directive. It is crucial for me to programmatically obtain the form's name where t ...
Below is the HTML code I am working with: <div class="card-deck" fxLayout.xs="row" style="overflow: scroll; height:100%"> <md-card style="width:10rem" *ngFor="let make of filteredMakes" (click)="goToModels(make.niceName)" class=" ...
My application has successfully integrated the last.fm API to fetch related artists. The concept is simple - search for an artist and receive a list of related artists in return. While using 'onClick' works flawlessly as it retrieves the input v ...
I've been attempting to create a JavaScript toggle so that when I click on any of the buttons below, only that particular div is shown and all others are hidden. Unfortunately, my code is not working as expected: function toggle(show,hide) { do ...
How can I customize the appearance of Material's UI table header? Perhaps by adding classes using useStyle. <TableHead > <TableRow > <TableCell hover>Dessert (100g serving)</TableCell> ...